點擊切換div內容

Question

每個h5元素都有編輯按鈕，如果我點擊此按鈕，它將隱藏類名爲'not-editable'的div，並顯示帶有類名'editable'的div。

我寫的代碼工作完美，只有當我有一個容器，但如果我添加另一個容器，並嘗試點擊編輯按鈕，它會更新兩個相應容器的div。

這裏是我附上上述功能的代碼。

只是嘗試點擊'編輯'，它會更新兩個divs，我在找什麼，只更新相應的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相關的元素。其次，this是.edit_toggle。調用find()就是多餘的，因爲你正在尋找的元素不是它的子元素。最後，您需要檢查if條件中的length屬性，因爲jQuery選擇器返回的對象總是等於true。

要解決，你可以修改你的邏輯，以獲得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

使用這個JS

獲取

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

選擇元素容器內引用到最近的容器只有如下

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(); 
    } 
}); 

片段

$('.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>