Question

当点击类bl3时，我正在尝试编写一些简单的jQuery来显示类blc3。我已经让它在点击bl3课程时显示每个课程blc3，但我希望它只打开与点击的bl3相关的特定blc3

HTML：

<div class="product pro">
    <img class="product-img pro" src="'.$product[" imagesrc "].'"/>
    <div class="product-actions pro">
        <div class="info-block pro bl3" style="display:none;">
            <div class="product-title pro">Ships to:</div>
            <div class="product-description pro">Days:</div>
            <div class="product-sale pro">UK</div>
            <div class="product-prize pro">7</div>
            <div class="button-buy pro">Buy now</div>
            <div class="add pro">Add</div>
        </div>
    </div>
    <div class="nav titlen pro">TESTING</div>
    <div class="nav pro boxp">
        <ul>
            <li class="active blc1"><span class="icon-tag f15"></span> '.$product["price"].'
                <br>
            </li>
            <li class="blc2"><span class="icon-time f15"></span> '.$product["stime"].'
                <br>
            </li>
            <li class="blc3"><span class="icon-plane f15"></span> '.$product["sto"].'
                <br>
            </li>
            <li><span class="icon-zoom-in f15"></span> '.$product["sto"].'
                <br>
            </li>
        </ul>
    </div>
</div>

JQUERY：

$j(".blc3").click(function() {
    $j(this).parent().prev('.bl3').css('display','block');  
});

不幸的是，这并没有选择正确的元素。

下面的jQuery用于显示类bl3的所有元素：

$j('.bl3').css('display','block');

但我想只显示与点击的blc3相关的那个如何只展示适当的bl3？

Answer 1

我建议使用下面的jQuery选择器。对于点击的每个.blc3，它会查找父div.product，然后在该元素中搜索.bl3。

$('.blc3').on('click',function(){
    $(this).closest('div.product').find('.bl3').show();
});

文档：closest()，find()

以下测试：

＆＃13;

$('.blc3').on('click', function() {
  $(this).closest('div.product').find('.bl3').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product pro">
  <img class="product-img pro" src="'.$product[" imagesrc "].'"/>
  <div class="product-actions pro">
    <div class="info-block pro bl3" style="display:none;">
      <div class="product-title pro">Ships to:</div>
      <div class="product-description pro">Days:</div>
      <div class="product-sale pro">UK</div>
      <div class="product-prize pro">7</div>
      <div class="button-buy pro">Buy now</div>
      <div class="add pro">Add</div>
    </div>
  </div>
  <div class="nav titlen pro">TESTING</div>
  <div class="nav pro boxp">
    <ul>
      <li class="active blc1"><span class="icon-tag f15"></span> '.$product["price"].'
        <br>
      </li>
      <li class="blc2"><span class="icon-time f15"></span> '.$product["stime"].'
        <br>
      </li>
      <li class="blc3"><span class="icon-plane f15"></span> '.$product["sto"].'
        <br>
      </li>
      <li><span class="icon-zoom-in f15"></span> '.$product["sto"].'
        <br>
      </li>
    </ul>
  </div>
</div>

<div class="product pro">
  <img class="product-img pro" src="'.$product[" imagesrc "].'"/>
  <div class="product-actions pro">
    <div class="info-block pro bl3" style="display:none;">
      <div class="product-title pro">Ships to:</div>
      <div class="product-description pro">Days:</div>
      <div class="product-sale pro">UK</div>
      <div class="product-prize pro">7</div>
      <div class="button-buy pro">Buy now</div>
      <div class="add pro">Add</div>
    </div>
  </div>
  <div class="nav titlen pro">TESTING</div>
  <div class="nav pro boxp">
    <ul>
      <li class="active blc1"><span class="icon-tag f15"></span> '.$product["price"].'
        <br>
      </li>
      <li class="blc2"><span class="icon-time f15"></span> '.$product["stime"].'
        <br>
      </li>
      <li class="blc3"><span class="icon-plane f15"></span> '.$product["sto"].'
        <br>
      </li>
      <li><span class="icon-zoom-in f15"></span> '.$product["sto"].'
        <br>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Jquery选择父类div

1 个答案: