使用jquery读取id并将action应用于相应的div

时间:2014-07-02 11:04:30

标签: javascript jquery html css

我想要某个按钮来显示某个div。现在我需要为每个新按钮和更新我的javascript更新DIV。由于这将连接到cms,因此每个帖子都需要自动工作。如何动态地从按钮中读取id / class以将动作应用于相应的div?

思维方式:

  • button_xxx打开id为xxx
  • 的div
  • button_xxx_close关闭它

这是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');
    });

});

4 个答案:

答案 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');
});

示例:http://jsfiddle.net/XXE2R/