我想要某个按钮来显示某个div。现在我需要为每个新按钮和更新我的javascript更新DIV。由于这将连接到cms,因此每个帖子都需要自动工作。如何动态地从按钮中读取id / class以将动作应用于相应的div?
思维方式:
这是html:
<a href="#" id="button_001">Button 001</a>
<a href="#" id="button_002">Button 002</a>
...
<a href="#" id="button_099">Button 099</a>
<div id="001">
<p><a href="#" class="button_001_close">CLOSE</a></p>
<p>Content</p>
</div>
<div id="002">
<p><a href="#" class="button_002_close">CLOSE</a></p>
<p>Content</p>
</div>
<div id="099">
<p><a href="#" class="button_099_close">CLOSE</a></p>
<p>Content</p>
</div>
和javascript:
$(document).ready(function() {
// SHOWS DIV
$('#button_001').on('click', function(){
$('#001').removeClass('movedown');
$('#001').addClass('moveup');
});
$('#button_002').on('click', function(){
$('#002').removeClass('movedown');
$('#002').addClass('moveup');
});
$('#button_099').on('click', function(){
$('#099').removeClass('movedown');
$('#099').addClass('moveup');
});
// HIDES DIV
$('.button_001_close').on('click', function(){
$('#001').removeClass('moveup');
$('#001').addClass('movedown');
});
$('.button_002_close').on('click', function(){
$('#002').removeClass('moveup');
$('#002').addClass('movedown');
});
$('.button_099_close').on('click', function(){
$('#099').removeClass('moveup');
$('#099').addClass('movedown');
});
});
答案 0 :(得分:0)
您可以使用jquery
中的startswith
属性选择器来减少代码
$("a[id^=button_]").click(function () {
var id = this.id.split("_")[1];
$("#" + id).removeClass("movedown").addClass("mouseup");
});
$('[class^=button_]').on('click', function () {
var id = $(this).attr("class").split("_")[1];
$("#" + id).removeClass("mouseup").addClass("movedown");
});
第一个代码段将选择ID为button_
的所有主要元素,并将click事件绑定到它们。
第二个片段将选择所有带有button_
类开头的元素,并将click事件绑定到它们。
注意
如果您的元素是动态创建的,请使用以下代码
$(document).on("click", "a[id^=button_]", function () {
var id = this.id.split("_")[1];
$("#" + id).removeClass("movedown").addClass("mouseup");
});
$(document).on('click', '[class^=button_]', function () {
var id = $(this).attr("class").split("_")[1];
$("#" + id).removeClass("mouseup").addClass("movedown");
});
修改
$('[class^=button_]').on('click', function () {
// var id = this.id.split("_")[1]; <-- changedd this line
var id = $(this).attr("class").split("_")[1];
$("#" + id).removeClass("mouseup").addClass("movedown");
});
我改变了这一行,因为那个元素没有id。所以你应该选择类名。
您可以使用$(this).attr("class")
获取当前元素的类名。然后拆分类名以提取div id
答案 1 :(得分:0)
只需使用toggleClass
$("a[id^=button_] , [class^=button_]").click(function () {
var id = this.id.split("_")[1];
$("#" + id).toggleClass("movedown mouseup");
});
答案 2 :(得分:0)
试试这个:
$(document).ready(function() {
// SHOWS DIV
var elem = '';
$('a[id*="button_"]').on('click', function(){
elem = this.id.split('_')[1];
$('#'+elem).toggleClass('movedown moveup');
});
// HIDES DIV
$('.button_'+elem+'_close').on('click', function(){
$('#'+elem).toggleClass('movedown moveup');
});
});
答案 3 :(得分:0)
你可以做到这一点而不需要对你的html进行少量更改的正则表达式
<a href="#" class="button_open_div" data-divid="001">Button 001</a>
<div id="001">
<p><a href="#" class="button_close_div" data-divid="001">CLOSE</a></p>
<p>Content</p>
</div>
然后为
添加点击处理程序$('.button_open_div').on('click', function(ev){
$('#'+$(this).data('divid')).removeClass('movedown').addClass('moveup');
});
$('.button_close_div').on('click', function(){
$('#'+$(this).data('divid')).removeClass('moveup').addClass('movedown');
});
或切换功能
$('.button_open_div, .button_close_div').on('click', function(ev){
$('#'+$(this).data('divid')).toggleClass('movedown moveup');
});