Question

这是一个noob问题： - ）。

有没有办法将以下代码写入if then函数，以便在不添加更多条目的情况下进行计数？

<script>
$("#click1").click(function () {
$("#parentshowhide div:not(#show1)").hide();
$("#show1").show("fast");
});

$("#click2").click(function () {
$("#parentshowhide div:not(#show2)").hide();
$("#show2").show("fast");
});

$("#click3").click(function () {
$("#parentshowhide div:not(#show3)").hide();
$("#show3").show("fast");
});

$("#click4").click(function () {
$("#parentshowhide div:not(#show4)").hide();
$("#show4").show("slow");
});
</script>

提前致谢!!

很抱歉在代码中误导你们。代码的“快”和“慢”部分应该是相同的。所以无论是全速还是全速，都不需要变量。

我现在将测试所有建议。

谢谢，森

Answer 1

如果您发现自己正在使用#click1，#click2，#click3等，那么您应该认为这些项目都有类似的行为。在标记方面有一个词，它们都属于同一个类。因此，如果你给#clicki类.button，并训练相关的html结构，你可以一次性完成：

$('.button').click(...)

Answer 2

确实有。这一切都是为了在代码中找到常见的东西并使它们可重用。根据需要添加到配置对象。这个解决方案可以完全按照你想要的那样做，但是你需要通过记录davin的答案来更好地使用选择器的全部功能。

var config = {
  1: 'fast',
  2: 'fast',
  3: 'fast',
  4: 'slow'
};

for (var key in config) {
  var value = config[key];

  $("#click" + key).click(function () {
    $("#parentshowhide div:not(#show" + key + ")").hide();
    $("#show" + key).show(value);
  });
}

Answer 3

好的，我相信这是最简单的方法。

<script type="text/javascript">
    $(document).ready(function(){
        // Add a class of 'toggle' to the links
        $("a.toggle").click(function(){
            // Create a variable to know which one we're hiding / showing
            var number = toInt($(this).attr("id").replace("click",""));
            $("#parentshowhide div:not(#show" + number)).hide();
            $("#show" + number).show("fast");
        })
    })
</script>

这是未经测试的，但逻辑是合理的。任何问题请创建一个jsFiddle，我会跟进它。

Answer 4

嗯，我没有测试它，但你可以尝试以下方法：

<script>
var i=1;

while($("#click"+i)){
    $("#click"+i).click(function () {
        $("#parentshowhide div:not(#show"+i+")").hide();
        $("#show"+i).show("slow");
    }
    i++;
}

</script>

Answer 5

看起来你在那里有一个标签页。如果#click1到#clickX都共享同一个父级，则可以执行以下操作：

确保#click1 - #clickX中的每一个都具有一些HTML属性（如HREF），该属性具有不应隐藏的相关元素的ID。然后给所有#click1 - #clickX共享CSS类。
将#click集的父节点绑定到（1）按ID（使用HREF或其他属性）隐藏所有链接内容的函数;然后（2）显示被点击项目标识的内容。

这里有一些JS（假设#click1是A，所有#clickX都在DIV里面，带有“.tabset”）：

$('a.clickable', $('.tabset')).live('click', function(event) {
   // hide all linked content
   var jThis = $(this);
   var jSet = jThis.closest('.tabset');
   jSet.find('a.clickable').each(function() {
      $('#' + $(arguments[1]).attr('href')).hide();
   });
   // show this one piece of content
   $('#' + jThis.attr('href')).show();

   // prevent further handling
   event.preventDefault();
   return false;

});

该代码以此标记为目标：

<div class="tabset">
   <a class="clickable" href="#show1">View #1</a>
   <a class="clickable" href="#show2">View #2</a>
   ...
   <a class="clickable" href="#showX">View #X</a>
</div>

<div id="#show1"> [stuff here] </div>
<div id="#show2"> [more stuff] </div>
<div id="#showX"> [stufffffff] </div>

如果您不能（或不想）在一个容器中包含所有#clickX项目，则需要进行一些小的更改。您需要将所有项目收集到可以在点击处理程序中访问的集合中，因此仍然可以识别和隐藏所有“竞争对手”内容。

如何将以下代码清理为if then函数

5 个答案: