如何將以下代碼清理為if函數

Question

這是一個菜鳥問題:-)。

有沒有一種方法可以將以下代碼編寫到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提供#clicki類，並鍛煉相關的html結構，則可以.button做到這一點：

$('.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都共享同一父對象，則可以執行以下操作：

1. 確保每個#click1 - #clickX有一些HTML屬性（如一個HREF具有不應該得到隱藏的相關元素的ID）。 然后給所有的#click1 - #clickX共享的CSS類。

2. 將一個函數綁定到#click集合的父#click ，該函數（1）按ID隱藏所有鏈接的內容（使用HREF或其他屬性）； 然后（2）顯示由單擊的項目標識的內容。

這是一些JS（假設#click1是A ，並且所有#clickX都在帶有“ .tabset”的DIV ）：

$('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項目放在一個容器中，則需要進行一些小的更改。 您需要將所有項目收集到一個在單擊處理程序期間可以訪問的集合中，以便仍可以識別並隱藏所有“競爭”內容。