javascript - 我如何将 jquery 函数用于多个 div

Question

我想<div>使用 JavaScript/DOM 属性为 a 提供一个显示/隐藏功能。

onclick()使用带有两个按钮的JavaScriptshow和hide，每个按钮都在它们自己<div>的 s 中，它会像这样工作：

• 默认情况下，show按钮是隐藏的，显示主<div>按钮和隐藏按钮。单击hide按钮隐藏主按钮<div>和“隐藏”按钮本身，显示show按钮。
• 单击show按钮显示主要<div>和“显示”按钮显示hide按钮我认为这可以使用类似的东西来实现document.getElementById(DIVid).style.visibility="hidden"。

但是我该怎么做呢？

Answer 1

$('#hidebutton').click(function() {
   $('#DIVid, #showbutton').show();
   $(this).hide();
});

$('#showbutton').click(function() {
   $('#DIVid, #hidebutton').show();
   $(this).hide();
});

或者，如果您愿意：

$('#hidebutton, #showbutton').click(function() {
    var show = $(this).is('#showbutton');
    $('#DIVid, #hidebutton').toggle(show);
    $('#showbutton').toggle(!show);
});

Answer 2

为每个定义一个类<div>并使其具有 jQuery 功能。这是示例代码：

<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

Jquery code

$(".a").click(function(e){
your code goes here
}

Answer 3

请检查这个：见演示

$("#btnclk").click(function() {
    if ($('.test').is(':visible')) {
        $(".test").hide();
    } else {
        $(".test").show();
    }
});

<div class="test">
  Div1
</div>
<div class="test">
  Div1
</div>

<input type="button" id="btnclk" value="Show/Hide">

或者，如果你想用 JavaScript 来做，那么使用getElementsByClassName而不是getElementById.

Answer 4

jsBin 演示

简单的jQuery：

$('.show_hide').click(function(){
  $(this).text( $(this).text()==='HIDE'?'SHOW':'HIDE' );
  $(this).next('.box_content').stop().slideToggle();
});

HTML：

  <div class="box">
    <h2>Title 1</h2><button class="show_hide">HIDE</button>
    <div class="box_content">
      <p>
        1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus tortor at nisl dictum lobortis. Mauris dolor augue, porttitor non cursus et, hendrerit sed mi. Morbi sollicitudin sodales dui, et interdum justo condimentum vel.
      </p>
      
    </div>
  </div>

CSS：

.box{
  position:relative;
  padding:15px;
  background:#eee;
  margin:10px;
}
.box h2{
  margin:0px;
  padding:5px;
}
.show_hide{
  position:absolute;
  right:15px;
  top:20px;
  cursor:pointer;
}