クリック時のdivコンテンツの切り替え

Question

h5要素ごとに編集ボタンがあります。このボタンをクリックすると、クラス名が「編集不可」のdivが表示され、編集可能なクラス名が表示されます。

私が書かれたコードは、私は1つの容器を持っているが、私は別のコンテナーを追加し、編集ボタンをクリックしようとした場合、それはそれぞれのコンテナのdiv要素の両方を更新します場合にのみ、完全に取り組んでいます。

は、ここで私は、上記の機能のためのコードを付加しています。

ちょうど '編集'をクリックしようとすると、両方のdivを更新します、私が探しているものは、編集ボタンをクリックしたそれぞれのdivのみを更新します。値はdivを更新しますが、私は 'これ'で試してみましたが、なぜ動作していないのかわかりません。できるだけJavaScriptの初心者なので、なぜ私のコードが機能しないのか説明してください。

は、あなたが理解し、あなたの助けを事前に感謝願っています。

$('.edit_toggle').click(function(e){ 
 
    e.preventDefault(); 
 
    var noEdit = $('.not-editable'); 
 
    var edit = $('.editable'); 
 
    if($(this).find(noEdit)){ 
 
    $(noEdit).fadeOut(); 
 
    $(edit).fadeIn(); 
 
    } 
 
});

.not-editable{ 
 
\t display: block; 
 
} 
 
.editable{ 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container-1"> 
 
    <h5> 
 
    header 
 
    <a href="#" class="edit_toggle">edit</a> 
 
    </h5> 
 
    <div class="not-editable"> 
 
    Lorem 
 
    </div> 
 
    <div class="editable"> 
 
    Lorem 123 
 
    </div> 
 
</div> 
 
<div class="container-1"> 
 
    <h5> 
 
    another header 
 
    <a href="#" class="edit_toggle">edit</a> 
 
    </h5> 
 
    <div class="row not-editable"> 
 
    another Lorem 
 
    </div> 
 
    <div class="row editable"> 
 
    another Lorem 123 
 
    </div> 
 
</div>

Answer 1

あなたはいくつかの問題があります。まず、あなたはすべての.not-editableと.editable要素、クリックされた.edit_toggleに関連したものだけでなくを取得しています。第2に、thisは.edit_toggleです。あなたが探している要素がその子要素ではないので、find()を呼び出すことは冗長です。最後に、あなたはjQueryのセレクタが常にtrueに相当オブジェクトを返すようif状態でlengthプロパティをチェックする必要があります。

あなたがclosest()コンテナを得るためにあなたのロジックを修正することができ、問題を解決するには、このようなそこから必要な要素は、find()：

$('.edit_toggle').click(function(e) { 
 
    e.preventDefault(); 
 
    var $container = $(this).closest('.container-1'); 
 

 
    $container.find('.not-editable').fadeOut(); 
 
    $container.find('.editable').fadeIn(); 
 
});

.not-editable { display: block; } 
 
.editable { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container-1"> 
 
    <h5> 
 
    header 
 
    <a href="#" class="edit_toggle">edit</a> 
 
    </h5> 
 
    <div class="not-editable"> 
 
    Lorem 
 
    </div> 
 
    <div class="editable"> 
 
    Lorem 123 
 
    </div> 
 
</div> 
 
<div class="container-1"> 
 
    <h5> 
 
    another header 
 
    <a href="#" class="edit_toggle">edit</a> 
 
    </h5> 
 
    <div class="row not-editable"> 
 
    another Lorem 
 
    </div> 
 
    <div class="row editable"> 
 
    another Lorem 123 
 
    </div> 
 
</div>

Answer 2

あなたはこれを行うと：

var noEdit = $('.not-editable'); 
    var edit = $('.editable'); 

あなたはすでに、これらのクラスを持つオブジェクトのためのDOMを照会し、その結果として、変数に保存しています（ document.querySelectorAll('.not-editable')と比較してください。 クラスを文字列として保存してみてください（またはハードコードなど）。

var noEdit = '.not-editable'; 
    var edit = '.editable'; 

Answer 3

parentとfind使用。以下の例。

$('.edit_toggle').click(function(e){ 
 
    e.preventDefault(); 
 
    var noEdit = $(this).parent().parent().find('.not-editable'); 
 
    var edit = $(this).parent().parent().find('.editable'); 
 
    if($(this).find(noEdit)){ 
 
    $(noEdit).fadeOut(); 
 
    $(edit).fadeIn(); 
 
    } 
 
});

.not-editable{ 
 
\t display: block; 
 
} 
 
.editable{ 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container-1"> 
 
    <h5> 
 
    header 
 
    <a href="#" class="edit_toggle">edit</a> 
 
    </h5> 
 
    <div class="not-editable"> 
 
    Lorem 
 
    </div> 
 
    <div class="editable"> 
 
    Lorem 123 
 
    </div> 
 
</div> 
 
<div class="container-1"> 
 
    <h5> 
 
    another header 
 
    <a href="#" class="edit_toggle">edit</a> 
 
    </h5> 
 
    <div class="row not-editable"> 
 
    another Lorem 
 
    </div> 
 
    <div class="row editable"> 
 
    another Lorem 123 
 
    </div> 
 
</div>

Answer 4

<script> 
    $('.edit_toggle').click(function(e){ 
    e.preventDefault(); 
    $(this).parent().next().hide(); 
    $(this).parent().next().next().show(); 
    }); 
    </script> 

あなたがしたい場合はスクリプトの上にある同じHTML構造をそのまま使用してください。

Answer 5

使用すると、これは

が

var noEdit = $('.not-editable',container); 
var edit = $('.editable',container); 

全体JS

$('.edit_toggle').click(function(e){ 
    e.preventDefault(); 
    var container = this.closest('.container-1'); 
    var noEdit = $('.not-editable',container); 
    var edit = $('.editable',container); 
    if($(this).find(noEdit)){ 
    $(noEdit).fadeOut(); 
    $(edit).fadeIn(); 
    } 
}); 

を次の唯一のよう

var container = this.closest('.container-1'); 

選択要素、そのコンテナの内側に最も近いコンテナへの参照を取得しますJS

スニペットむしろ `$（この）.parent（）親（）より

$('.edit_toggle').click(function(e){ 
 
    e.preventDefault(); 
 
    var container = this.closest('.container-1'); 
 
    var noEdit = $('.not-editable',container); 
 
    var edit = $('.editable',container); 
 
    if($(this).find(noEdit)){ 
 
    $(noEdit).fadeOut(); 
 
    $(edit).fadeIn(); 
 
    } 
 
});

.not-editable{ 
 
\t display: block; 
 
} 
 
.editable{ 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-1"> 
 
    <h5> 
 
    header 
 
    <a href="#" class="edit_toggle">edit</a> 
 
    </h5> 
 
    <div class="not-editable"> 
 
    Lorem 
 
    </div> 
 
    <div class="editable"> 
 
    Lorem 123 
 
    </div> 
 
</div> 
 
<div class="container-1"> 
 
    <h5> 
 
    another header 
 
    <a href="#" class="edit_toggle">edit</a> 
 
    </h5> 
 
    <div class="row not-editable"> 
 
    another Lorem 
 
    </div> 
 
    <div class="row editable"> 
 
    another Lorem 123 
 
    </div> 
 
</div>