Question

我有整个div的.wine-list-text-panel类和文本的.wine-list-text。我将jquery应用于第一个li，但我想对所有li重复相同的jquery效果。而不是为不同的li使用不同的classname编写相同的代码。我想要适用于所有li的动态代码。

＆＃13;

$(document).ready(function() {
  $('.wine-list').mouseover(function() {
    $('.wine-list-text').hide();
    $('.wine-list-text-panel').css({
      "background": "#fff"
    });
  });

  $('.wine-list').mouseout(function() {
    $('.wine-list-text').show();
    $('.wine-list-text-panel').css({
      "background": "#000"
    });
  });
});

＆＃13;

<section id="packages" class="">
  <div class="container demo-3">
    <!-- Top Navigation -->

    <ul class="grid cs-style-4">
      <li>
        <figure class="wine-list">
          <div class="wine-recommends">
            <img src="img/dummy.png" alt="img05">
          </div>
          <figcaption>
            <h5>Safari</h5>
            <span class="wine-recommends-text">Jacob Cummings</span>
            <a href="http://dribbble.com/shots/1116775-Safari" data-toggle="modal" data-target="#myModal">Details</a>
          </figcaption>
          <div class="wine-list-text-panel" style="color: #fff;text-align: center;background: #000;padding: 5px 0;height: 30px;"><span class="wine-list-text">Chardonnay</span>
          </div>
        </figure>
      </li>
      <li>
        <figure>
          <div class="wine-recommends">
            <img src="img/dummy1.png" alt="img06">
          </div>
          <figcaption>
            <h5>Game Center</h5>
            <span class="wine-recommends-text">Jacob Cummings</span>
            <a href="http://dribbble.com/shots/1118904-Game-Center">Details</a>
          </figcaption>
          <div class="wine-list-text-panel" style="color: #fff;text-align: center;background: #000;padding: 5px 0;height: 30px;"><span class="wine-list-text">Chardonnay</span>
          </div>
        </figure>
      </li>
      <li>
        <figure>
          <div class="wine-recommends">
            <img src="img/dummy.png" alt="img02">
          </div>
          <figcaption>
            <h5>Music</h5>
            <span class="wine-recommends-text">Jacob Cummings</span>
            <a href="http://dribbble.com/shots/1115960-Music">Details</a>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <div class="wine-recommends">
            <img src="img/dummy.png" alt="img04">
          </div>
          <figcaption>
            <h5>Settings</h5>
            <span class="wine-recommends-text">Jacob Cummings</span>
            <a href="http://dribbble.com/shots/1116685-Settings">Details</a>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <div class="wine-recommends">
            <img src="img/dummy.png" alt="img01">
          </div>
          <figcaption>
            <h5>Camera</h5>
            <span class="wine-recommends-text">Jacob Cummings</span>
            <a href="http://dribbble.com/shots/1115632-Camera">Details</a>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <div class="wine-recommends">
            <img src="img/dummy.png" alt="img03">
          </div>
          <figcaption>
            <h5>Phone</h5>
            <span class="wine-recommends-text">Jacob Cummings</span>
            <a href="http://dribbble.com/shots/1117308-Phone">Details</a>
          </figcaption>
        </figure>
      </li>
    </ul>
  </div>
</section>

＆＃13;

Answer 1

如果你想对作为li的孩子的所有div子女应用一些效果（我想是的，因为你的例子中的.wine-list是这样的），你可以这样做：

$('li > figure > div').mouseover( callbackWithHoverCode );

如果那些li元素是f.i.的孩子。 a＆＃39; .example-list＆＃39; ul，你可以用：

来定位它们

$('.example-list li > figure > div').mouseover( callbackWithHoverCode );

然而，不清楚你是否想要这样做或者你的问题更复杂。在您的问题中，您使用不同的类名称来讨论＆＃39; li，但在您的代码中，li标签没有类，而您使用jQuery定位的类是图中的div的类。如果这个答案对您没有帮助，也许您需要更新您的问题并使其更清晰。

Answer 2

试试这个：

$(document).ready(function() {
   $('.wine-list').mouseover(function() {
      $(this).hide();
   }); 
});

与其他元素相同

Answer 3

试试这个：

您必须为通用项目提供一些通用类。例如<figure class="list-item wine-list"> <div class="list-item-text-panel wine-list-text-panel"> <span class="list-item-text wine-list-text">

JS代码：

$(document).ready(function() {
  var $listItem = $('.list-item');
  var $listItemText;
  var $listItemTextPanel;
  var $this;


  $listItem.mouseover(function() {
    $this = $(this);
    $listItemText = $this.find('.list-item-text');
    $listItemTextPanel = $this.find('.list-item-text-panel');
    $listItemText.hide();

    $listItemTextPanel.css({
      "background": "#fff"
    });
  });

  $listItem.mouseout(function() {
    $this = $(this);
    $listItemText = $this.find('.list-item-text');
    $listItemTextPanel = $this.find('.list-item-text-panel');

    $listItemText.show();
    $listItemTextPanel.css({
      "background": "#000"
    });
  });
});

参考：http://jsbin.com/wixose/1/edit?html,js,output

您也可以尝试以下代码：

$(document).ready(function() {
  var $listItem = $('.list-item');
  var $listItemText;
  var $listItemTextPanel;
  var $this;

  $listItem.hover(function() {
    $this = $(this);
    $listItemText = $this.find('.list-item-text');
    $listItemTextPanel = $this.find('.list-item-text-panel');
    $listItemText.hide();

    $listItemTextPanel.css({
      "background": "#fff"
    });
  }, function() {
    $this = $(this);
    $listItemText = $this.find('.list-item-text');
    $listItemTextPanel = $this.find('.list-item-text-panel');

    $listItemText.show();
    $listItemTextPanel.css({
      "background": "#000"
    });
  })
});

如何使这个代码动态化

3 个答案: