如何使用單擊處理程序而不是多個任務？

下面的鏈接是一個項目，我目前工作： http://feathertest.me.pn/p-indoor.php#prod-stop 如何使用單擊處理程序而不是多個任務？

在上面的鏈接提供的，我有合適的可用的可點擊的顏色列表。基於用戶點擊的顏色，左側的圖像會相應地改變。

以下是代碼片段我用的是特殊的功能：

$(function() { 
    $('#showdiv1').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div1').show(); 
    }); 
    $('#showdiv2').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div2').show(); 
    }); 

    $('#showdiv3').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div3').show(); 
    }); 

    $('#showdiv4').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div4').show(); 
    }); 
})

我的HTML代碼片段：

<!-- mobile version start --> 
      <div class="row hidden-lg hidden-md hidden-sm"> 
       <div class="col-md-5 col-sm-5 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <p class="prod-code">FB - 329</p> 
        <p class="prod-title">Monara</p> 
        <p class="prod-desc">The best in class from our range of Indoor Brooms. This is the only broom in the market that has five rows of syntetic bristles. A "Heavy Duty" broom suitable for high dust areas.</p> 

        <div class="prod-det"> 
         <ul> 
          <li>Sweeps away more dirt at once while leaving no traces behind. </li> 
          <li>Split bristle edges for collecting fine dust.</li> 
          <li>Head enclosure constructed using the highest graded plastic material.</li> 
          <li>Uniform Italian handle thread.</li> 
          <li>Angled edges to reach corners.</li> 
          <li>150g of high quality synthetic bristles with excellent bend recovery for prolonged usage.</li> 
         </ul> 
        </div> 

        <br> 
        <div class="color-change"><b>Colours Available:</b></div> 
        <div class="color-box"> 
         <a id="tmonara-showdiv1" class="cb-pp" href="p-indoor.php#prod-stop" title="Purple"></a> 
         <a id="tmonara-showdiv2" class="cb-b" href="p-indoor.php#prod-stop" title="Black"></a> 
         <a id="tmonara-showdiv3" class="cb-o" href="p-indoor.php#prod-stop" title="Orange"></a> 
         <a id="tmonara-showdiv4" class="cb-p" href="p-indoor.php#prod-stop" title="Pink"></a> 
        </div> 
        <br><br> 
        <p class="color-change"><i>(click to change colors of product)</i></p> 
       </div> <!-- prod details end --> 
      </div> 
      <!-- mobile version end --> 

      <div id="feather-prods" class="row"> 

       <div id="div1"> 
       <div id="monara-purple" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <div class="prod-img"><img class="bigImg" src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom"></div> 

        <div class="thumbnailImg"> 
         <div class="thumb"><img src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb"><img src="images/broom/monara-pp-2.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb"><img src="images/broom/monara-pp-3.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb"><img src="images/broom/monara-pp-4.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
        </div> 
       </div> 
       </div> <!-- prod 1 end --> 

       <div id="div2" style="display:none;" > 
       <div id="monara-green" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <div class="prod-img"><img class="bigImg2" src="images/broom/monara-g-1.jpg" alt="feather, green monara broom"></div> 

        <div class="thumbnailImg"> 
         <div class="thumb2"><img src="images/broom/monara-g-1.jpg" alt="feather, green monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb2"><img src="images/broom/monara-g-2.jpg" alt="feather, green monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb2"><img src="images/broom/monara-g-3.jpg" alt="feather, green monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb2"><img src="images/broom/monara-g-4.jpg" alt="feather, green monara broom" border="0" width="100%" class="thumbImg" /></div> 
        </div> 
       </div> 
       </div> <!-- prod 2 end --> 

<div class="col-md-5 col-sm-5 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1 hidden-xs"> 
        <p class="prod-code">FB - 329</p> 
        <p class="prod-title">Monara</p> 
        <p class="prod-desc">The best in class from our range of Indoor Brooms. This is the only broom in the market that has five rows of syntetic bristles. A "Heavy Duty" broom suitable for high dust areas.</p> 

        <br> 
        <div class="color-change"><b>Colours Available:</b></div> 
        <div class="color-box"> 
         <a id="monara-showdiv1" class="cb-pp" href="p-indoor.php#prod-stop" title="Purple"></a> 
         <a id="monara-showdiv2" class="cb-g" href="p-indoor.php#prod-stop" title="Green"></a> 
         <a id="monara-showdiv3" class="cb-b" href="p-indoor.php#prod-stop" title="Black"></a> 
         <a id="monara-showdiv4" class="cb-o" href="p-indoor.php#prod-stop" title="Orange"></a> 
         <a id="monara-showdiv4" class="cb-p" href="p-indoor.php#prod-stop" title="Pink"></a> 
        </div> 
        <br><br> 
        <p class="color-change"><i>(click to change colors of product)</i></p> 

        <div class="prod-det"> 
         <ul> 
          <li>Sweeps away more dirt at once while leaving no traces behind. </li> 
          <li>Split bristle edges for collecting fine dust.</li> 
          <li>Head enclosure constructed using the highest graded plastic material.</li> 
          <li>Uniform Italian handle thread.</li> 
          <li>Angled edges to reach corners.</li> 
          <li>150g of high quality synthetic bristles with excellent bend recovery for prolonged usage.</li> 
         </ul> 
        </div> 
       </div> <!-- prod details end --> 
</div>

我有2個問題：

有沒有一種縮短jQuery代碼的方法？這意味着，我可以使用一個點擊處理程序來實現相同的任務，而不是使用多個點擊處理程序？當談到jQuery時，我仍然是一個noob。
如果您發現我有移動視圖的註釋部分（我必須爲移動視圖創建單獨的文本塊，因爲我需要對移動視口的設計進行一些更改）。我注意到，一旦我創建了移動視圖部分，上面的jQuery就停止了桌面視圖的工作，並且只能在移動視圖中工作，因此我必須爲移動視圖重新創建具有不同ID值的同一塊jQuery代碼。

如何讓相同的jQuery代碼（如上所述）適用於移動視圖和桌面視圖？

來源

2016-12-24 Hazra Hameed

好所以有大量的方法來解決這個問題。這可能是也可能不是最好的方式，但我認爲這是一個簡單的方法。您應該使用類，以便他們可以輕鬆使用相同的點擊處理程序，而不是使用ID。然後，您可以將數據屬性添加到顏色選項以與說明中的類相對應。所以這個：

<a id="tmonara-showdiv1" class="cb-pp" href="p-indoor.php#prod-stop" title="Purple"></a>

會變成這樣：

<a class="tmonara cb-pp" href="p-indoor.php#prod-stop" title="Purple" data-color="purple"></a>

而且這樣的：

<div id="div1"></div>

會變成這樣：

<div id="div1" class="description purple"></div>

然後jQuery代碼看起來像這樣：

$('.tmonara').click(function() { 
     var colorClicked = $(this).data('color'); 
     $('.description').hide(); 
     $('.description.' + colorClicked).show(); 
    });

我創建了這個JS Bin來顯示一個工作示例。請注意：我刪除了大量的代碼只是爲了簡化的例子： https://jsbin.com/johacetamo/edit?html,js,output

關於你的第二個問題，只能有一個頁面上的ID的一個實例。您的移動代碼是首先列出的，所以jQuery正在查找ID的第一個實例並忽略第二個實例（您的非移動視圖）。這就是改變ID的原因。如果你使用類，你不會有這個問題！

希望有幫助，請讓我知道是否有任何問題仍然令人困惑，或者如果我沒有正確回答您的問題。

來源

2016-12-24 09:40:46

投了一個比我更完整的答案。 –

謝謝@VanquishedWombat :) –

@JuliaNething一切工作！非常感謝！！！！：D –

的點擊代碼的重構一種可能的方法是如下，它工作的原理是，當類不符合的造型做，但作爲一個組標識符可以添加類的元素：

爲所有按鈕添加一個通用類，例如myButtonClass
爲所有div添加通用類，例如myDiv
修改您的代碼，使關聯的圖片具有與控件按鈕ID相匹配的類。例如按鈕＃showdiv1給＃div1一個額外的類，如class =「＃showdiv1」。

現在修改您的jquery，如下所示：。

$(".myButtonClass").on("click", function(e){ 

    // hide all the divs 
    $(".myDiv").hide() 

    // show the div with class matching button element id attr 
    $("." + $(this).prop("id")).show()  

})

這個jQuery現已覆蓋了所有的按鈕。

來源

2016-12-24 09:42:50

如何使用單擊處理程序而不是多個任務？

回答

相關問題