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

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

您可以使用数据属性。然后，使用 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");
        }
    });
});