1

I have hidden Divs with ".display-link" classes that are two levels up from an input box. When an input (checkbox) is clicked, it should display the hidden link in the parent's previous sibling's wrapper.

Or another way to say it is, when an input checkbox is clicked it should find the previous div with the class .display-link and show() that.

I am having trouble traversing the elements to reach this div with this class. It should only display the one, previous div.

<!DOCTYPE HTML>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$(document).ready(function(){

$(".display-link").hide();//hide all links

$('input').click (function ()
    {
    $(this).closest(".display-link").show();//doesn't work
    $(this).closest("div.display-link").show();//doesn't work
    myInput = $(this);
    $(myInput).closest(".display-link").show();//doesn't work
    $(myInput).parents(".display-link").show();//doesn't work
    $(myInput).prevUntil(".display-link").show();//doesn't work
    });
});
</script>
</head>

<body>
<div class="accordion-button">First Heading
  <div class="display-link">LINK</div>
</div>
<div class="collapsible">
  <div class="input-row">
    <input id="checkbox01" name="checkbox01" type="checkbox" value="value01"  />
    <label for="checkbox01" >Name 1</label>
  </div>
  <div class="input-row">
    <input id="checkbox02" name="checkbox02" type="checkbox" value="value02"  />
    <label for="checkbox02" >Name 2</label>
  </div>
</div>
<div class="accordion-button">Second Heading
  <div class="display-link">LINK</div>
</div>
<div class="collapsible">
  <div class="input-row">
    <input id="checkbox03" name="checkbox03" type="checkbox" value="value03"  />
    <label for="checkbox03" >Name 3</label>
  </div>
</div>
</body>
</html>

I need to go out of the collapsible div and into the accordion-button div down to the display-link div.

4

4 回答 4

1

由于.display-link您要显示的元素不是复选框的兄弟或祖先，因此您无法一步完成。首先查找.collapsible的兄弟元素.accordion-button，然后获取前一个元素，也就是.accordion-button它自己，然后找到其中的.display-link元素：

$(":checkbox").click(function() {
    $(this).closest(".collapsible").prev().find("display-link").show();
});

该closest方法只查看祖先元素，parents. 该prevUntil方法只查看前面的兄弟姐妹。

请注意，仅当您的结构保持原样时，上述内容才有效。如果您在会影响上述代码的位置添加元素，则必须相应地对其进行修改。如果您认为 DOM 可能会发生变化，则可以使其更加健壮：

$(this).closest(".collapsible").prevAll(".accordion-button:first").find(".display-link").show();
于 2012-01-17T22:23:08.817 回答
1 
$('input').on('click', function () {
    $(this).parents('.collapsible').prev('.accordion-button').children('.display-link').show();
});

这是一个演示：http: //jsfiddle.net/hazvX/

这会找到父.collapsible元素，找到前一个.accordion-button元素，然后选择它的子.display-link元素。

您的 HTML 显示有两个.display-link元素和三个输入。如果您希望输入找到第一个可能的（以前的）.display-link元素，您可以使用.prevAll()代替.prev()：

$('input').on('click', function () {
    $(this).parents('.collapsible').prevAll('.accordion-button').eq(0).children('.display-link').show();
});

这是一个演示：http: //jsfiddle.net/hazvX/1/

请注意，我还在函数.eq(0)之后添加了.prevAll()仅获取​​第一个返回的元素（因为可以有多个）。

请注意，这.on()是 jQuery 1.7 中的新内容，在这种情况下与.bind().

于 2012-01-17T22:23:54.277 回答
0

父母，最接近的将不起作用，因为它不在同一条路径上。

你能给他们一个ID，或者把他们放在另一个容器里：http: //jsfiddle.net/Cq9Cw/

于 2012-01-17T22:29:17.937 回答
-1

我将在这里提出的另一个解决方案是，如果每个输入都有相应的显示链接，那么您可以使用索引

http://jsfiddle.net/7TaqC/

现在当然在您的示例中有 3 个输入和只有 2 个链接，但是我不知道这是否是因为这只是您的代码的一小段

$(".display-link").hide();//hide all links

$('input').click (function (e)
{
   $this = $(this);
var index = $('input').index($this);
$('.display-link').eq(index).show();

});
于 2012-01-17T22:29:23.623 回答