【问题标题】:jQuery toggle next two elementsjQuery 切换下两个元素
【发布时间】:2010-11-04 07:30:05
【问题描述】:

I have a form select element that, when a certain value is selected, will toggle two other elements on the page (a dt / dd pair).

事件被正确触发,但我无法切换元素 - 请注意,我正在使用类选择器,因为页面上这些元素“集合”的数量是可变的。这是我的代码:

$(".lender_id").change(function () {
if($(this).val()=='45')
   {
   $(this).next(".lender_other1").toggle();
   $(this).next(".lender_other2").toggle();
   }
});

lender_id是我的select元素类,html代码如下(说明这个元素集可以在页面出现多次):

<dt>Lender</dt>
<dd><select name="lender_id[1]" class="lender_id">
<option value="1">Value</option>
<option value="45">Special Value</option>
</select></dd>

<dt class="lender_other1" style="display:none;">Lender Name</dt>
<dd class="lender_other2" style="display:none;">
<input type="text" name="lender_other[1]" value="" /></dd>

<dt>Lender</dt>
<dd><select name="lender_id[2]" class="lender_id">
<option value="1">Value</option>
<option value="45">Special Value</option>
</select></dd>

<dt class="lender_other1" style="display:none;">Lender Name</dt>
<dd class="lender_other2" style="display:none;">
<input type="text" name="lender_other[2]" value="" /></dd>

etc...

【问题讨论】:

    标签: jquery toggle elements next


    【解决方案1】:

    这是你想要的:

    $(".lender_id").change(function() {
        if ($(this).val() == '45') {
            $(this).parent().nextAll(".lender_other1:first, .lender_other2:first").toggle();
        };
    });
    

    编辑

    我将类选择器组合在一起以提高效率。

    【讨论】:

      【解决方案2】:

      next() 不会做你认为的那样。试试$(this).parent('dl').find('.lender_other1')。或者,你知道,也许只是$('.lender_other1')。

      【讨论】:

      • 我试过 $(this).parent('dl').find('.lender_other1').toggle();但它似乎不起作用。当我只需要切换该类的各种下一个实例时,只需 $('.lender_other1') 就会切换该类的所有元素。我更新了我的问题以提供更好的上下文。
      【解决方案3】:

      .next() 只返回下一个匹配,所以我认为你应该使用 .nextAll()

      http://docs.jquery.com/Traversing/nextAll#expr

      【讨论】:

      • 会是 $(this).nextAll(".lender_other1").toggle(); 的格式吗?如果是这样,那似乎也不起作用。任何想法为什么?谢谢。
      • 因为选择与您尝试定位的元素不在同一层次。
      • 好点 - 没看到
        。不要经常看到这些标签。无论如何,您必须先上到父级,然后使用 nextAll()
      • 再看一遍,nextAll() 也不起作用,因为其他类在层次结构中处于相同的深度。我再看看这个...
      【解决方案4】:

      使用slice(start, end) 方法。根据 john resig 的视频,这是正确的方法。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-10-27
        • 2021-07-15
        • 2014-12-14
        • 1970-01-01
        • 2013-06-06
        • 2012-08-07
        • 1970-01-01
        相关资源
        最近更新 更多