点击切换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>