5

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

$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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class = "repair_item">
  <div class = "repair_item_flex">
    <div class = "repair_item_img">
      <img src="<?php bloginfo('template_url')?>/theme/img/repair1.jpg" alt = "">
    </div>      
    <div class = "repair_item_text">экран</div>
  </div>
  <div class = "repair_item_hiddenList_js">
    <div class = "repair_item_hiddenList">
      <p class = "repair_item_hiddenList_title">Что мы можем сделать</p>
      <ul class = "repair_item_hiddenList_list">
        <li>Замена стекла</li>
        <li>Ремонт дисплея после попадания влаги</li>
        <li>Наклейка защитной пленки</li>
        <li>Замена дисплейного модуля</li>
        <li>Калибровка экрана</li>
        <li>Выведение легких царапин и потертостей</li>
        <li>Чистка дисплея от пыли</li>
        <li>Наклейка защитного стекла</li>
        <li>Диагностика</li>
      </ul>
    </div>
  </div>
</div>

$(document).on('click', ".repair_item", function() {
    var $list =  $(this).find(".repair_item_hiddenList_js").html();
    $list.css('display', 'block');  
});
9
  • ,html() убрать из кода
    – teran
    19 дек 2017 в 20:09
  • Не меняет свойство css все равно 19 дек 2017 в 20:11
  • .html() возвращает строку, а у строки нет метода css $(this).find(".repair_item_hiddenList_js").show();
    – user176262
    19 дек 2017 в 20:14
  • Мне нужно не только показать элемент, мне нужно проводить манипуляции с html элемента 19 дек 2017 в 20:15
  • и все равно даже так не работает 19 дек 2017 в 20:17

3 ответа 3

5

Вам нужно не 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class = "repair_item">
  <div class = "repair_item_flex">
    <div class = "repair_item_img">
      <img src="<?php bloginfo('template_url')?>/theme/img/repair1.jpg" alt = "">
    </div>      
    <div class = "repair_item_text">экран</div>
  </div>
  <div class = "repair_item_hiddenList_js">
    <div class = "repair_item_hiddenList">
      <p class = "repair_item_hiddenList_title">Что мы можем сделать</p>
      <ul class = "repair_item_hiddenList_list">
        <li>Замена стекла</li>
        <li>Ремонт дисплея после попадания влаги</li>
        <li>Наклейка защитной пленки</li>
        <li>Замена дисплейного модуля</li>
        <li>Калибровка экрана</li>
        <li>Выведение легких царапин и потертостей</li>
        <li>Чистка дисплея от пыли</li>
        <li>Наклейка защитного стекла</li>
        <li>Диагностика</li>
      </ul>
    </div>
  </div>
</div>

4
  • 1
    С обновкой Вас сударыня! Очень идет Вам, а то усы прямо шокировали. и плюс за хороший ответ. 22 дек 2017 в 20:09
  • @Alexandr_T, спасибо)
    – SVE
    22 дек 2017 в 20:45
  • кстати, точно такая же шляпа, как у тебя сейчас только что ко мне прилетела. Секретная, не догадалась за что её дали? 22 дек 2017 в 21:11
  • 1
    @Alexandr_T, дается за 10 голосов за один ответ
    – SVE
    23 дек 2017 в 5:37
5

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

var $list =  $(this).find(".repair_item_hiddenList");//.html();
$list.css('display', 'block'); // или $list.show();
6
  • Большое спасибо 19 дек 2017 в 20:29
  • 1
    опередил на пару секунд :)
    – teran
    19 дек 2017 в 20:30
  • @teran Хочешь 12.5 очков :)?
    – user176262
    19 дек 2017 в 20:30
  • 2
    Всем по тысяче очков.
    – user176262
    19 дек 2017 в 20:34
  • 2
    @Igor, восстановила с корявыми объяснениями)) да и +10 не помешают)
    – SVE
    19 дек 2017 в 20:37
0

$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class = "repair_item">
  <div class = "repair_item_flex">
    <div class = "repair_item_img">
      <img src="<?php bloginfo('template_url')?>/theme/img/repair1.jpg" alt = "">
    </div>      
    <div class = "repair_item_text">экран</div>
  </div>
  <div class = "repair_item_hiddenList_js">
    <div class = "repair_item_hiddenList">
      <p class = "repair_item_hiddenList_title">Что мы можем сделать</p>
      <ul class = "repair_item_hiddenList_list">
        <li>Замена стекла</li>
        <li>Ремонт дисплея после попадания влаги</li>
        <li>Наклейка защитной пленки</li>
        <li>Замена дисплейного модуля</li>
        <li>Калибровка экрана</li>
        <li>Выведение легких царапин и потертостей</li>
        <li>Чистка дисплея от пыли</li>
        <li>Наклейка защитного стекла</li>
        <li>Диагностика</li>
      </ul>
    </div>
  </div>
</div>

2
  • 1
    добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 20 дек 2017 в 10:04
  • тем более, что в ответе та же самая ошибка, что и в вопросе :)
    – user176262
    20 дек 2017 в 13:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.