Не удалось заставить скрипт jquery работать должным образом - PullRequest
Новая
       11

Не удалось заставить скрипт jquery работать должным образом

0 голосов
/ 11 февраля 2011

Я новичок в jquery. Я хочу простой список. Я просто хочу показать и скрыть дополнительные детали. 

<ul>
  <li><div onclick="show()"><img src="product_pic" />Product 1</div><div id="details" class="hide">short intro about the product</div></li>
<ul>

CSS 

.hide {display: none;}

JQuery 

function show(){
     $(this).next().toggleClass('hide');
}

Это не работает. Я ценю любую помощь.

Спасибо.

Ответы [ 2 ]

5 голосов
/ 11 февраля 2011

Две вещи:

  1. Это toggleClass, а не toggleclass
  2. Подключите обработчик событий, используя jQuery, а не атрибуты старого стиля.

Итак: 

$("div.hide").prev().click(function() {
    $(this).next().toggleClass('hide');
});

Живой пример

Как это работает:

  • Мы находим div, у которых есть этот «скрытый» класс, и затем мы находим всех их непосредственных предшественников через prev. Это создает набор всех элементов div, за которыми сразу следует div.hide div.
  • Мы подключаем событие click к предшественникам.
  • Когда происходит click, мы переключаем класс на элемент next после того, который был нажат.

Думаю, я бы порекомендовал вам использовать отдельный класс "details" или что-то рядом с "hide", на случай, если вы захотите использовать "hide" в другом месте, которое не будет иметь такой точной структуры. И если вы это сделаете, вы можете показать и скрыть, не меняя класс; jQuery достаточно умен, чтобы переопределить бит «display: none» в CSS, даже если применяется правило (не все библиотеки). Это будет выглядеть так:

CSS: 

.details {
    display: none;
}

Markup: 

<li><div><img src="product_pic" />Product 1</div><div class="details">short intro about the product</div></li>

JavaScript: 

$("div.details").prev().click(function() {
  $(this).nextAll("div.details:first").toggle();
});

Живой пример

Обратите внимание, что используется toggle вместо toggleClass.

Примечание : отмечу, что у вас есть id="details" в деталях div. Помните, что id значения должны быть уникальными, поэтому, если у вас есть более одного из них, вы не можете использовать «детали» в качестве id каждого из них.

0 голосов
/ 11 февраля 2011

1.Измените «toggleclass» на «toggleClass».2Вы можете попробовать это:

HTML: 

<ul>
  <li>
      <div class="show"><img src="product_pic" />Product 1</div>
      <div id="details" class="hide">short intro about the product</div>
  </li>
<ul>

JS: 

$('.show').bind('click', function(ev){
     $(this).next('div').toggleClass('hide');
});

CSS 

.hide {display: none;}

РЕДАКТИРОВАТЬ

Если вы собираетесь использовать несколько тегов «li», вам следует удалить идентификатор «details», поскольку он будет повторяться и должен быть уникальным.Ваш HTML-код может быть следующим:

HTML: 

<ul>
  <li>
      <div class="show"><img src="product_pic" />Product 1</div>
      <div class="details hide">short intro about the product</div>
  </li>
  <li>
      <div class="show"><img src="product_pic" />Product 2</div>
      <div class="details hide">other short intro about the product</div>
  </li>
<ul>

ИЛИ 

<ul>
  <li>
      <div class="show"><img src="product_pic" />Product 1</div>
      <div id="details-prod-1" class="hide">short intro about the product</div>
  </li>
  <li>
      <div class="show"><img src="product_pic" />Product 2</div>
      <div id="details-prod-2" class="hide">other short intro about the product</div>
  </li>
<ul>
...