凝結重複jQuery代碼爲selector1，selector2等

-1

我有八個可點擊的圖標（脈衝1，脈衝2 - 脈衝8）鏈接到相應的內容（content1，content2等）。而不是每次寫下面的代碼爲每個有代碼的方式，我可以使用一個增加的整數或什麼東西濃縮它？這款遊戲相當新穎！凝結重複jQuery代碼爲selector1，selector2等

開發的版本可以在http://aceresponsive.webdevspace.co.uk

非常感謝可見。

$("#pulse1").click(function() { 

    $(this).siblings(".active").removeClass("active"); 
    $(this).toggleClass('active'); 

    if ($('.purple-content').is(':visible')) { 

     if ($('#content1').is(':visible')) { 

      $(".purple-content").fadeOut(); 


     } else { 

      $(".purple-content").fadeOut(); 

      $("#content1").fadeToggle(); 
     } 

    } else { 

     $("#content1").fadeToggle(); 

    } 
});

這就要求：

<div class="purple-content" id="content1"> 
<h2>the brain</h2> 

<img src="assets/img/icons/brain-dark.png" width="144" height="167" alt="The Brain"  class="alignright"> 
<p>Stroke … A serious medical condition that occurs when the blood supply to part of the brain is cut off. It can affect our bodily functions, thought processing, ability to learn, communication and emotions.</p> 

<h3>Learn More</h3> 

<ul> 
<li><a href="#">The factors that can increase risk</a></li> 
<li><a href="#">Stroke symptoms</a></li> 
<li><a href="#">Types of stroke</a></li> 
</ul> 

</div>

來源

2013-10-15 Dave

你可以給彌補這些部分之一，它如何如何與另一部分的HTML的例子嗎？ –

爲您的鏈接和內容區域提供了一個共同的類別，爲每個內容區域提供一個實際以某種方式代表內容的ID（不是content1，content2等），然後給您的鏈接一個'href =「＃theid」'現在您可以從鏈接的href中獲取內容區域的id並顯示它，然後隱藏其餘部分。 –

嗨凱文，我已經添加了一個鏈接到開發版本和什麼脈衝鏈接...乾杯！ – Dave

安裝與HTML一些參考，在這裏我已經給它一個data-屬性，你可以通過點擊jQuery的.data()方法來收集。

<div class="pulse" data-contentref="1"><div> 
<div class="pulse" data-contentref="2"><div> 
.. 
<div class="pulse" data-contentref="n"><div> 

<script> 
    $(".pulse").click(function() { 

     var $Content = $('#content'+ $(this).data('contentref') +''); 
     $(this).siblings(".active").removeClass("active"); 
     $(this).toggleClass('active'); 

     if ($('.purple-content').is(':visible')) { 
      if ($Content.is(':visible')) { 
       $(".purple-content").fadeOut(); 
      } else { 
       $(".purple-content").fadeOut(); 
       $Content.fadeToggle(); 
      } 
     } else { 
      $Content.fadeToggle(); 
     } 
    }); 
</script>

小提琴補充說：http://jsfiddle.net/7JvFZ/3/

來源

2013-10-15 14:55:05 MackieeE

謝謝，相應的data-contentref是否需要附加到按鈕（#pulse）和內容？嘗試過，但似乎無法讓它工作！ – Dave

我已經添加了一個小提示給你一個關於如何使用類和'.data（）'ids =）的想法http://jsfiddle.net/7JvFZ/3/ – MackieeE

啊，我現在明白了...輝煌 - 謝謝！ – Dave

可以概括的功能，在pulse年底假設ID號不會進入兩位數：

$("[id^=pulse]").click(function() { 
    var idNum = this.id.substr(this.id.length - 1, 1); 
    $(this).siblings(".active").removeClass("active"); 
    $(this).toggleClass('active'); 

    if ($('.purple-content').is(':visible')) { 
     if ($('#content' + idNum).is(':visible')) { 
      $(".purple-content").fadeOut(); 
     } else { 
      $(".purple-content").fadeOut(); 
      $("#content" + idNum).fadeToggle(); 
     } 
    } else { 
     $("#content" + idNum).fadeToggle(); 
    } 
});

來源

2013-10-15 14:50:25 tymeJV

工作完美，非常感謝！將做一些mor研究它是如何工作的。 – Dave

凝結重複jQuery代碼爲selector1，selector2等

回答

相關問題