Question

好的，所以我现在已经开始编程了一段时间。我还很新，但我正在研究我所知道的。我遇到了这个障碍，我试图弄清楚如何让jquery允许我为多个按钮提供相同的功能，每个按钮对不同的盒子做出反应。基本上一个按钮将确保所有框都关闭“.hide（）”，然后打开特定的框。截至目前，我点击特定按钮时无法获得特定按钮。

Jquery的

$(document).ready(function(){
$("#hide1").click(function(){
if ($("#box1").css('display') == "none"){
    $(".box").hide();
    $(".bttn").css("opacity", ".5");
    $("#box1").fadeToggle();
    $("#hide1").css("opacity", "1");}
else
{
$("#box1").fadeToggle();
$("#hide1").css("opacity", ".5");
}   
});
});

$(document).ready(function(){
$("#hide2").click(function(){
if ($("#box2").css('display') == "none"){
    $(".box").hide();
    $(".bttn").css("opacity", ".5");
    $("#box2").fadeToggle();
    $("#hide2").css("opacity", "1");}
        else
{
$("#box2").fadeToggle();
$("#hide2").css("opacity", ".5");
}
});
});

HTML

<ul>
<li style="opacity:.5;" id="hide1" class="bttn"></li>
<li style="opacity:.5;" id="hide2" class="bttn"></li>
</ul>
<div style="display:none;" id="box1" class="box">
<div style="display:none;" id="box2" class="box">

现在这个设置工作。但是我想知道是否有办法将jquery压缩成一个函数，这样点击任一按钮（li）就可以让它与它的各个部门一起工作。

https://jsfiddle.net/nathanahartmann/5h3r1671/

Answer 1

您可以使用data属性。然后，使用jQuery为所有按钮创建一个函数。

这会将li链接到＃box1

<li style="opacity:.5;" id="hide1" class="bttn" data-target="#box1"></li>

在你的jQuery中，检索按钮。

$('.bttn').on('click', function(){
    var target = $($(this).data('target'));
    $('.bttn').css('opacity', '.5');
    if(target.css('display') == "none"){    
        $('.box').hide();
        target.fadeToggle();
        $(this).css('opacity', '1');
    }

    target.fadeToggle();
});

如果你有很多盒子，这很好。

以下是一个例子：jsFiddle

Answer 2

这里只是使用索引进行定位。

https://jsfiddle.net/u1cksgyh/

$(document).ready(function() {
  $('.bttn').click(function() {
    var btn = $(this).index();
    box = $('.box');

    $(".bttn").css("opacity", ".5");
    $(".box").hide();

    $(this).css("opacity", "1");
    $(box[btn]).fadeToggle();

  });
});

Answer 3

当然，您可以将 this 关键字与id属性上使用的命名约定结合使用。我建议在名称和数字之间添加短划线，如下所示：

<ul>
    <li style="opacity:.5;" id="hide-1" class="bttn"></li>
    <li style="opacity:.5;" id="hide-2" class="bttn"></li>
</ul>
<div style="display:none;" id="box-1" class="box">
<div style="display:none;" id="box-2" class="box">

然后，您可以将单击事件附加到'bttn'类，并使用一个函数，使用 this 抓取当前单击的元素并查看它的id。将数字存储在变量中，您可以使用它来操纵具有匹配数字的其他元素。它可能看起来像这样：

$(document).ready(function() {
    $(".bttn").click(function() {
        var $this = $(this),
        id = $this.attr('id').split('-')[0];

        if ($this.css('display') == "none") {
            $(".box").hide();
            $(".bttn").css("opacity", ".5");
            $("#box-" + id).fadeToggle();
            $("#hide-" + id).css("opacity", "1");
        } else {
            $("#box-" + id).fadeToggle();
            $("#hide-" + id).css("opacity", ".5");
        }
    });
});

创建一个Jquery函数来处理多个使用多个框的按钮

3 个答案: