Question

大家下午好。

我需要一点帮助，我有一些重复的JavaScript代码，我想凝聚，我想要做的是创建一个带有count变量的for循环，增加#DetailsBtn（i）替换的数字是在那里，用i的计数器值替换它。

现在我没有做太多Javascript，而且我是C＃/ .Net和Java开发人员，但我认为for循环应该有点类似。你可以看到我想用79号和80号参考代替的东西。

非常感谢任何帮助。

$("#DetailsBtn79").click(function () {
    $("#DetailsRow79").toggleClass("gameRowOpen");
    $("#DetailsRow79 .leftDatePantherHolder").toggleClass("gameRowOpen");
    $("#DetailsRow79 .hgDate").toggleClass("gameRowOpen");
    $("#DetailsRow79 .hgGameTimeThemeGiveaway").toggleClass("gameRowOpen");
    $("#DetailsRow79 .hgGameTheme").toggleClass("gameRowOpen");
    $("#DetailsRow79 .hgMatchupBox").toggleClass("gameRowOpen");
    $("#DetailsRow79 .hgMKEWaveBox, #DetailsRow79 .hgOpponentBox").toggleClass("gameRowOpen");

    $("#DetailsRow79 .hgMatchupBoxExpanded").toggleClass("gameRowOpen");
    $("#DetailsRow79 .gameThemeAreaExpanded").toggleClass("gameRowOpen");
    });
    $('#DetailsBtn79').toggle(function () {
    $("#DetailsRow79 .ticketMasterGameLink").fadeIn();
    }, function () {
    $("#DetailsRow79 .ticketMasterGameLink").hide();
    });

$("#DetailsBtn80").click(function () {
    $("#DetailsRow80").toggleClass("gameRowOpen");
    $("#DetailsRow80 .leftDatePantherHolder").toggleClass("gameRowOpen");
    $("#DetailsRow80 .hgDate").toggleClass("gameRowOpen");
    $("#DetailsRow80 .hgGameTimeThemeGiveaway").toggleClass("gameRowOpen");
    $("#DetailsRow80 .hgGameTheme").toggleClass("gameRowOpen");
    $("#DetailsRow80 .hgMatchupBox").toggleClass("gameRowOpen");
    $("#DetailsRow80 .hgMKEWaveBox, #DetailsRow78 .hgOpponentBox").toggleClass("gameRowOpen");
    //$("#DetailsRow80 .ticketMasterGameLink").fadeToggle();
    $("#DetailsRow80 .hgMatchupBoxExpanded").toggleClass("gameRowOpen");
    $("#DetailsRow80 .gameThemeAreaExpanded").toggleClass("gameRowOpen");
    });
    $('#DetailsBtn80').toggle(function () {
    $("#DetailsRow80 .ticketMasterGameLink").fadeIn();
    }, function () {
    $("#DetailsRow80 .ticketMasterGameLink").hide();
    });

Answer 1

这就是我要做的事。

首先向＃DetailsBtn添加一个类，我们称之为.DetailsBtn。

新代码将是：

$(".DetailsBtn").click(function () {
    var i = $(this).attr('id').replace('DetailsBtn', '');
    $("#DetailsRow"+i).toggleClass("gameRowOpen");
    $("#DetailsRow"+i+" .leftDatePantherHolder").toggleClass("gameRowOpen");
    $("#DetailsRow"+i+" .hgDate").toggleClass("gameRowOpen");
    $("#DetailsRow"+i+" .hgGameTimeThemeGiveaway").toggleClass("gameRowOpen");
    $("#DetailsRow"+i+" .hgGameTheme").toggleClass("gameRowOpen");
    $("#DetailsRow"+i+" .hgMatchupBox").toggleClass("gameRowOpen");
    $("#DetailsRow"+i+" .hgMKEWaveBox, #DetailsRow"+i+" .hgOpponentBox").toggleClass("gameRowOpen");

    $("#DetailsRow"+i+" .hgMatchupBoxExpanded").toggleClass("gameRowOpen");
    $("#DetailsRow"+i+" .gameThemeAreaExpanded").toggleClass("gameRowOpen");
    });
    $('#DetailsBtn'+i).toggle(function () {
    $("#DetailsRow"+i+" .ticketMasterGameLink").fadeIn();
    }, function () {
    $("#DetailsRow"+i+" .ticketMasterGameLink").hide();
  });

因此，上面的代码将获取任何＃DetailsBtn，从id中获取数字值，并使用它来显示与该数字值相关的数据。

Answer 2

我认为你要做的是：

HTML：

<button class="DetailsBtn" id="DetailsBtn79">Button 79</button>
<button class="DetailsBtn" id="DetailsBtn80">Button 80</button>

使用Javascript：

$(".DetailsBtn").click(function(event)
{
    var btn = $(event.target);
    btn.toggleClass("gameRowOpen");
    // etc
});

要了解id="" vs class=""，请参阅http://www.w3schools.com/css/css_selectors.asp。

Answer 3

WOW！

请优化您的代码，使用更智能的选择器删除这些重复的行。还要考虑在根元素上切换类，而不是所有子元素。

以下代码使用for循环，并且它具有代码的优化版本：

＆＃13;

function set(i) {
  $("#DetailsBtn" + i).click(function() {
    $(this).toggleClass("gameRowOpen");
    $(this).find(".leftDatePantherHolder .hgDate .hgGameTimeThemeGiveaway  .hgGameTheme .hgMatchupBox .hgMKEWaveBox .hgOpponentBox").toggleClass("gameRowOpen");
  })
}

for (var i = 0; i < 100; i++) {
  set(i);
}

＆＃13;

.gameRowOpen {color: green}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="DetailsBtn0">CLICK ME</div>
<div id="DetailsBtn1">CLICK ME</div>
<div id="DetailsBtn2">CLICK ME</div>

＆＃13;

我真的不确定为什么其他答案都没有建议优化代码...

Answer 4

将所有元素的字符串放在一个数组中，然后迭代它，例如在你的情况下这可能是解决方案：

var elements = ["#DetailsBtn79", "#DetailsBtn80"];

for (element in elements) {
    $(elements).click(function () {
        $(element).toggleClass("gameRowOpen");

        // ... rest of your treatment

        $(element + " .ticketMasterGameLink").hide();
    });
}

Answer 5

是的，你可以像java / c＃

那样做

for (var i = 79; i <=80; i++)
{
   $("#DetailsBtn"+i).click(function () {
   ...
   }
}

用于循环实现的JavaScript

5 个答案: