鞏固jQuery代碼

我有30個按鈕，範圍從#p3-btn到#p30-btn，當點擊時使.p3 div一直達到.p30 div會產生不同的效果。我如何合併這段代碼，所以我不必從字面上複製和粘貼30次以下的代碼並更改ID和類？鞏固jQuery代碼

$('#p3-btn').click(function() { 
    $('.p3').fadeIn().delay(2000).fadeOut(); 
    });

乾杯。

來源

2017-10-10 asdf

是否有某種方式來識別所有這些按鈕，而無需使用單獨的'id'值？例如，他們是否共享一個'class'值？ *他們可以嗎？它們是可識別父容器元素的子元素嗎？還有別的嗎？如果他們從字面上完成同樣的事情，那麼肯定不需要* 30 *點擊處理程序。 – David

好問題，但請張貼您的HTML以及在堆棧片段/ jsfiddle –

這是在編程中DRY（不要重複自己）概念的一個很好的例子。其中一個解決它的辦法就是讓與您將用來指元素的ID和類的其他元素，例如ID參數的函數：

function attachClick(id){ 
    $('#' + id + '-btn').click(function() { 
    $('.' + id).fadeIn().delay(2000).fadeOut(); 
    }); 
}

然後，只需調用功能（比如，從一個for循環）是這樣的：

attachClick('p30');

雖然上面的例子是一個1：1的匹配與您現有的代碼，一個更好的辦法是找到一個每個按鈕與其影響的元素之間的關係，以避免將監聽器附加到每個按鈕individua lly，而是將一個監聽器附加到一個父元素，並讓事件處理函數負責其餘部分。但是，如果沒有看到您的標記，我無法告訴您是否可以在不重寫的情況下執行此操作。例如，如果您有類似這樣的標記，這將是微不足道的實施：

<div class="container"> 
    <button>Button</button> 
    <div>Div to be affected</div> 
</div>

來源

2017-10-10 12:24:43 Shomz

更簡單的說Shomz的anwser，你可以使用jQuery選擇：

$('button[id^="p"][id$="-btn"]').on("click", function() { 
    var id = $(this).attr("id").replace("-btn", "").replace("p", ""); 
    $('.p' + id).fadeIn().delay(2000).fadeOut(); 
});

哪裏$('button[id^="p"][id$="-btn"]')允許您選擇元素鍵入button，其中id以'p'開頭並以'-btn'結尾。

來源

2017-10-10 12:32:19 GGO

您可以使用屬性選擇器來實現此目的。

function createDivs(len) { 
 
    var $div = $('<div>'); 
 
    for (var i = 0; i < len; i++) { 
 
    var prefix = 'p' + i; 
 
    var $inner = $('<div>'); 
 
    $inner.attr('id', prefix + '-btn') 
 
    var $p = $('<p>'); 
 
    $p.text(i).addClass(prefix); 
 
    $inner.append($p); 
 
    $div.append($inner); 
 
    } 
 
    return $div; 
 
} 
 
$(function() { 
 
    $('.content').append(createDivs(30)); 
 

 
    $('[id^="p"][id$="-btn"]').on('click', function() { 
 
    $(this).find('[class^=p]').fadeOut().delay(2000).fadeIn(); 
 
    }); 
 
})

[id$="-btn"] { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class='content' />

來源

2017-10-10 12:34:17 Rajesh

鞏固jQuery代碼

回答

相關問題