如何使用javascript点击同一个类或id两次并获得不同的属性

How to click a same class or id 2 times and get different properties using javascript

本文关键字：两次 属性 javascript 何使用 同一个 id      更新时间：2023-09-26

提前感谢，我的语言不好抱歉，如果有任何错误，

$('.clickable').click(function(){
    $('.content').fadeIn();
});
$('.clickable').click(function(){
    $('.content').fadeOut();
});

有没有办法点击同一个类2次，得到不同的属性。

我已经尝试过隐藏一个类，当点击它时，这里的细节，

<div class="show">show</div>
<div class="hide" style="display:none;">hide</div>
$('.show').click(function(){
    $('.content').fadeIn();
    $('.show').css("display","none");
    $('.hide').css("display","block");
});
$('.hide').click(function(){
    $('.content').fadeOut();
    $('.hide').css("display","none");
    $('.show').css("display","block");
});

使用音量切换

$('#FadeToggle').click(function() {
  $('.content').fadeToggle();
  $(this).text(function() {
    return $(this).text() == 'Hide' ? 'Show' : 'Hide';
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="content">the content</p>
<button id="FadeToggle">Hide</button>

您可以使用$.toggle

此外，您不能在单击时切换元素。你可以隐藏，但一旦隐藏，你就无法点击它。

$("#btnToggle").on("click", function(){
  $(".content").toggle(300);
})
.content{
  height:60px;
  width:60px;
  border:2px solid gray;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content"> This is a test div</div>
<button id="btnToggle">Toggle visibility</button>

相关文章：