我想使用按钮和JQuery click事件显示隐藏不同的div。如何选择合适的div来显示或隐藏它?
$(document).ready(function(){
$("#button-1").click(function(){
$("#intro-1").css({"display" : "none"});
$("#content-1").css({"display" : "inline-block"});
});
$("#button-2").click(function(){
$("#intro-2").css({"display" : "none"});
$("#content-2").css({"display" : "inline-block"});
});
});
#content-1, #content-2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="cont-1">
<div id="intro-1">
<p> Some text...</p>
</div>
<div id="content-1">
<p>More explicative text</p>
</div>
</div>
<button id="button-1" class="mybuttonclass"> Click here</button>
<div id="cont-2">
<div id="intro-2">
<p> Some text...</p>
</div>
<div id="content-2">
<p>More explicative text</p>
</div>
</div>
<button id="button-2" class="mybuttonclass"> Click here</button>
<!-- other <div id="cont-x" -->
</div>
现在,我需要使用id =“ cont-x”创建大量其他div ...是否可以创建一个函数,您可以通过单击按钮来选择要显示/隐藏的正确div按班级? 直到现在,我为每个按钮创建一个函数,然后检索潜水以按ID显示/隐藏。我想对所有div使用一个函数,然后按类名选择“ this”按钮。有可能吗?
答案 0 :(得分:1)
您仅需要此CSS和JS即可完成任务。 :)
jQuery('.mybuttonclass').on('click', function(){
// Get the number from button ID.
var id = jQuery(this).attr('id').replace('button-','');
// Toggle the visibility.
jQuery("#intro-" + id).css({"display" : "none"});
jQuery("#content-" + id).css({"display" : "inline-block"});
});
[id^="content-"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="cont-1">
<div id="intro-1">
<p> Some text...</p>
</div>
<div id="content-1">
<p>More explicative text</p>
</div>
</div>
<button id="button-1" class="mybuttonclass"> Click here</button>
<div id="cont-2">
<div id="intro-2">
<p> Some text...</p>
</div>
<div id="content-2" >
<p>More explicative text</p>
</div>
</div>
<button id="button-2" class="mybuttonclass"> Click here</button>
<!-- other <div id="cont-x" -->
</div>
答案 1 :(得分:0)
您可以使用类似这样的东西。
我在按钮中添加了data-target="#cont-1"
,因此您可以标记div以打开。
$(document).ready(function(){
$(".mybuttonclass").click(function() {
$("div[id*='cont-']").hide();
var target = $(this).data('target');
$(target).toggle();
});
});
#cont-1,#cont-2{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="cont-1">
<div id="intro-1">
<p> Some text...</p>
</div>
<div id="content-1">
<p>More explicative text</p>
</div>
</div>
<button id="button-1" class="mybuttonclass" data-target="#cont-1"> Click here</button>
<div id="cont-2">
<div id="intro-2">
<p> Some text...</p>
</div>
<div id="content-2">
<p>More explicative text</p>
</div>
</div>
<button id="button-2" class="mybuttonclass" data-target="#cont-2"> Click here</button>
<!-- other <div id="cont-x" -->
</div>
答案 2 :(得分:0)
用于渲染和按钮动作之类的组件的POC:
let count = 0;
function addCard() {
const card = `<div class="intro" data-num="${count}">intro</div>
<div class="content hide" data-num="${count}">content</div>
<div class="show-btn" onClick="toggleShow(${count})">SHOW</div>`;
document.body.innerHTML += card;
count++;
}
function toggleShow(num) {
document.querySelector(`.intro[data-num="${num}"]`).classList.toggle("hide");
document.querySelector(`.content[data-num="${num}"]`).classList.toggle("hide");
}
.add,
.show-btn {
margin-bottom: 20px;
cursor: pointer;
}
.hide {
display: none;
}
<div class="add" onClick="addCard()">ADD</div>
答案 3 :(得分:0)
在大多数情况下,使用都不使用
很容易实现id
请参阅:
document.addEventListener('click', function(event) { // delegate listener on document
if (event.target.matches('button.showmore')) {
event.target.parentElement.classList.toggle('show-more');
}
})
.explicative-text {
display: none;
}
.show-more .explicative-text {
display: block;
}
<div class="container">
<div>
<div class="intro-text">
<p> Some text...</p>
</div>
<div class="explicative-text">
<p>More explicative text</p>
</div>
<button class="showmore"> Click here</button>
</div>
<div>
<div class="intro-text">
<p> Some text...</p>
</div>
<div class="explicative-text">
<p>More explicative text</p>
</div>
<button class="showmore"> Click here</button>
</div>
</div>
答案 4 :(得分:0)
如果您需要ID可以满足其他要求,但可以使用此使用类。只需将intro-group
类用于一个组,然后在元素上hidden
进行初始隐藏并对其进行切换,就更容易了,添加一个类toggled
并使用它来定位元素以切换该类hidden
上。
$(function() {
$(".mybuttonclass").on('click', function() {
$(this).prev('.intro-group').find(".toggled").toggleClass("hidden");
});
});
.intro,
.content {
display: inline-block;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="intro-group">
<div class="intro toggled">
<p> Some text...</p>
</div>
<div class="content toggled hidden ">
<p>More explicative text</p>
</div>
<div class="toggled hidden ">
<p>I am another element to toggle</p>
</div>
</div>
<button class="mybuttonclass"> Click here</button>
<div class="intro-group">
<div class="intro toggled">
<p> Some text...</p>
</div>
<div class="content toggled hidden">
<p>More explicative text, I am longer</p>
</div>
</div>
<button class="mybuttonclass"> Click here</button>
</div>