Страницы

Поиск по вопросам

пятница, 20 декабря 2019 г.

Как обратиться к переменной внутри функции?

#javascript #jquery 


Есть такая функция, которая находит элемент на страницу, но когда я пытаюсь сделать
что-либо с этим элементом, то консоль выдает:


  $list.css is not a function


Как мне проводить манипуляции с этой переменной?



$(document).on('click', ".repair_item", function() {
  var $list =  $(this).find(".repair_item_hiddenList_js").html();
  $list.css('display', 'block');


});
.repair_item {
  width: 300px;
  height: 140px;
  margin-bottom: 30px;
}
.repair_item:hover {
  cursor: pointer;
}
.repair_item_flex {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.repair_item_img {
  width: 50%;
  height: 100%;
}
.repair_item_img img {
  width: 100%;
  height: 100%;
}
.repair_item_text {
  width: 50%;
  height: 100%;
  background-color: #37acfb;
  color: white;
  font-size: 15px;
  font-family: "Roboto Consendered Bold";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: uppercase;
}
.repair_item_hiddenList {
  display: none;
  background-color: #252525;
  width: 100%;
  color: white;
  padding: 25px 30px 20px;
  left: 0px;
  margin-top: 40px;
}
.repair_item_hiddenList_title {
  font-size: 17px;
  font-family: "Roboto Consendered Bold";
}
.repair_item_hiddenList_list {
  list-style: none;
  padding-left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.repair_item_hiddenList_list li {
  font-size: 15px;
  font-family: "Roboto Consendered Regular";
  display: block;
  width: 270px;
  margin-bottom: 15px;
}
.repair_item_hiddenList_list li:before {
  content: "-";
  position: relative;
  left: -10px;
}





  

    

      
    
      
    
экран

  

  

    

      
Что мы можем сделать

      
    
        
  • Замена стекла
    • 
        
  • Ремонт дисплея после попадания влаги
    • 
        
  • Наклейка защитной пленки
    • 
        
  • Замена дисплейного модуля
    • 
        
  • Калибровка экрана
    • 
        
  • Выведение легких царапин и потертостей
    • 
        
  • Чистка дисплея от пыли
    • 
        
  • Наклейка защитного стекла
    • 
        
  • Диагностика
    • 
      

    

  







$(document).on('click', ".repair_item", function() {
    var $list =  $(this).find(".repair_item_hiddenList_js").html();
    $list.css('display', 'block');  
});


Ответы

Ответ 1


Вам нужно не block.html() добавлять .css, а самому блоку. 
Но, как я понимаю, 
не самому .repair_item_hiddenList_js, а его "ребенка" - .repair_item_hiddenList Вы
хотите показывать, поэтому так:



$(document).on('click', ".repair_item", function() {
  var $list =  $(this).find(".repair_item_hiddenList");
  $list.css({'display': 'block'});


});
.repair_item {
  width: 300px;
  height: 140px;
  margin-bottom: 30px;
}
.repair_item:hover {
  cursor: pointer;
}
.repair_item_flex {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.repair_item_img {
  width: 50%;
  height: 100%;
}
.repair_item_img img {
  width: 100%;
  height: 100%;
}
.repair_item_text {
  width: 50%;
  height: 100%;
  background-color: #37acfb;
  color: white;
  font-size: 15px;
  font-family: "Roboto Consendered Bold";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: uppercase;
}
.repair_item_hiddenList {
  display: none;
  background-color: #252525;
  width: 100%;
  color: white;
  padding: 25px 30px 20px;
  left: 0px;
  margin-top: 40px;
}
.repair_item_hiddenList_title {
  font-size: 17px;
  font-family: "Roboto Consendered Bold";
}
.repair_item_hiddenList_list {
  list-style: none;
  padding-left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.repair_item_hiddenList_list li {
  font-size: 15px;
  font-family: "Roboto Consendered Regular";
  display: block;
  width: 270px;
  margin-bottom: 15px;
}
.repair_item_hiddenList_list li:before {
  content: "-";
  position: relative;
  left: -10px;
}





  

    

      
    
      
    
экран

  

  

    

      
Что мы можем сделать

      
    
        
  • Замена стекла
    • 
        
  • Ремонт дисплея после попадания влаги
    • 
        
  • Наклейка защитной пленки
    • 
        
  • Замена дисплейного модуля
    • 
        
  • Калибровка экрана
    • 
        
  • Выведение легких царапин и потертостей
    • 
        
  • Чистка дисплея от пыли
    • 
        
  • Наклейка защитного стекла
    • 
        
  • Диагностика
    • 
      

    

  





Ответ 2


На каком классе стоит display: none;?

var $list =  $(this).find(".repair_item_hiddenList");//.html();
$list.css('display', 'block'); // или $list.show();


Ответ 3


$(document).on('click', ".repair_item", function() {
  var $list =  $(this).find(".repair_item_hiddenList_js").html();
  $list.css('display', 'block');


});
.repair_item {
  width: 300px;
  height: 140px;
  margin-bottom: 30px;
}
.repair_item:hover {
  cursor: pointer;
}
.repair_item_flex {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.repair_item_img {
  width: 50%;
  height: 100%;
}
.repair_item_img img {
  width: 100%;
  height: 100%;
}
.repair_item_text {
  width: 50%;
  height: 100%;
  background-color: #37acfb;
  color: white;
  font-size: 15px;
  font-family: "Roboto Consendered Bold";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: uppercase;
}
.repair_item_hiddenList {
  display: none;
  background-color: #252525;
  width: 100%;
  color: white;
  padding: 25px 30px 20px;
  left: 0px;
  margin-top: 40px;
}
.repair_item_hiddenList_title {
  font-size: 17px;
  font-family: "Roboto Consendered Bold";
}
.repair_item_hiddenList_list {
  list-style: none;
  padding-left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.repair_item_hiddenList_list li {
  font-size: 15px;
  font-family: "Roboto Consendered Regular";
  display: block;
  width: 270px;
  margin-bottom: 15px;
}
.repair_item_hiddenList_list li:before {
  content: "-";
  position: relative;
  left: -10px;
}





  

    

      
    
      
    
экран

  

  

    

      
Что мы можем сделать

      
    
        
  • Замена стекла
    • 
        
  • Ремонт дисплея после попадания влаги
    • 
        
  • Наклейка защитной пленки
    • 
        
  • Замена дисплейного модуля
    • 
        
  • Калибровка экрана
    • 
        
  • Выведение легких царапин и потертостей
    • 
        
  • Чистка дисплея от пыли
    • 
        
  • Наклейка защитного стекла
    • 
        
  • Диагностика
    •

Автор: на
Ярлыки: , ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)