1

入力ボックスから2レベル上の「.display-link」クラスでDivを非表示にしました。入力（チェックボックス）をクリックすると、親の前の兄弟のラッパーに非表示のリンクが表示されます。

または、別の言い方をすれば、入力チェックボックスをクリックすると、クラス.display-linkとshow（）を持つ前のdivが見つかるはずです。

このクラスでこのdivに到達するために要素をトラバースするのに問題があります。前のdivを1つだけ表示する必要があります。

<!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>

折りたたみ可能なdivから出て、アコーディオンボタンdivからdisplay-linkdivに移動する必要があります。

4

4 に答える 4

1

表示する.display-link要素はチェックボックスの兄弟または祖先ではないため、これを1つのステップで実行することはできません。最初に.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は、2つの.display-link要素と3つの入力があることを示しています。入力で、次の代わりに.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()これはjQuery1.7の新機能であり、この場合はと同じであることに注意してください.bind()。

于 2012-01-17T22:23:54.277 に答える
0

同じパスにないため、最も近い親は機能しません。

それらにIDを与えるか、別のコンテナーに入れることができますか：http: //jsfiddle.net/Cq9Cw/

于 2012-01-17T22:29:17.937 に答える
-1

ここで紹介するもう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 に答える