使用jquery進行DRY編程

發佈爲jquery新手。我確信必須有一種方法來以乾的方式來壓縮下面的代碼。本質上，這是應用到多個元素在頁面上只顯示/隱藏，都使用相同的模板和命名約定：使用jquery進行DRY編程

$("#homelink1").hover(
    function() { $("#poptext1").show(); }, 
    function() { $("#poptext1").hide(); } 
); 

$("#homelink2").hover(
    function() { $("#poptext2").show(); }, 
    function() { $("#poptext2").hide(); } 
); 
...

我卡在如何將其轉換爲一個函數傳遞的參數，以便我可以傳遞整數（1或2）並讓函數評估其餘部分，例如

$("#homelink" + param).hover

來源

2010-07-07 JayZeeNYC

向我們展示相關的HTML項目 – Incognito 2010-07-07 21:07:06

如何：

function setHover(param){ 
    $("#homelink" + param).hover(
    function() { $("#poptext" + param).show(); }, 
    function() { $("#poptext" + param).hide(); } 
); 
}

來源

2010-07-07 20:53:38

或param作爲數組？是嗎？是嗎？ – 2010-07-07 20:59:28

或者你可以使用'for'循環:) – 2010-07-08 00:02:23

均爲其各自#homelink的#poptext元素的孩子嗎？如果是這樣，你可以創建一個「鏈家」類和「poptext」類，然後像做了以下內容：對象的

$(".homelink .poptext").hover(
    function() { $(this).show(); }, 
    function() { $(this).hide(); } 
});

作爲一個方面說明，在jQuery的工作大部分功能也很好的收藏品爲他們在一個單一的。在這種情況下，即使$（「。homelink .poptext」）正在返回一個對象集合，每個對象都通過hover（）單獨與一個mouseover和mouseout處理程序關聯。

來源

2010-07-07 20:56:36 Faisal

我其實已經在代碼中有了一些類似的類，所以這個結果很好。 .poptext元素是.homelabel元素的兄弟，所以對我有用的代碼是： $（「div.homelabel」）。hover（ function（）{$（this）.siblings（「.poptext」）（）。$（this）.siblings（「。poptext」）。hide（）;} ）;}（）;}， function; – JayZeeNYC 2010-07-07 21:37:52

太棒了！另外，對我來說，這裏有一種「嘟嘟嘟嘟」的時刻，但我忘了你想要的是與homelink相關的hover（）事件，而不是poptext，在這種情況下，我的代碼不起作用。無論如何，最後還是要好好研究一下。 :) – Faisal 2010-07-07 21:51:35

我可能會嘗試一些類似如下：

$('.homelink').bind('hover', function(){ 
    $('.poptext', this).toggleClass('hide'); 
}); 

# and some CSS 

.hide { 
    display: none 
}

綁定懸停事件到一個通用的類名，而不是試圖找出如何hackishly將其綁定到#homelink {} somenumber和#poptext {} somenumber。如果你必須保持你的ID（例如用於造型鉤），但是要簡化事物並使用類。

來源

2010-07-07 21:03:39

我同意 - 這似乎是一個「巧合偶合」的情況，其中兩件事物因爲共享一個命名約定而預期會有關係。課程絕對是這裏的方式。 – Faisal 2010-07-07 21:13:52

+1我不知道HTML結構，但假設'.poptext'類在某種程度上與'.homelink'結構相關。如果是這樣，這使得添加新的東西非常簡單 - 只需更改HTML，JavaScript保持不變。 – Anurag 2010-07-07 21:15:52

是的，這絕對是一個更靈活的解決方案。我最終選擇了Faisal的解決方案，因爲它最少需要重構我現有的代碼，但我喜歡這種方法。 – JayZeeNYC 2010-07-07 21:42:43

您可以使用正則表達式從homelink中獲取懸停的編號，然後切換關聯的poptext。

試試看：http://jsfiddle.net/xFR3s/

$("#homelink1,#homelink2").hover(function() { 
    $("#poptext" + this.id.match(/\d+$/)[0]).toggle(); 
});

你可以把它與一個「打頭」選擇爲homelink元素短。效率較低，但它只在DOM負載上運行一次，所以也許沒問題。

試試看：http://jsfiddle.net/xFR3s/1/

$("[id^=homelink]").hover(function() { 
    $("#poptext" + this.id.match(/\d+$/)[0]).toggle(); 
});

編輯：如果你不希望它解釋上飛呢，我想我會做這樣的事情：

試一試：http://jsfiddle.net/xFR3s/2/

$("[id^=homelink]").each(function() { 
    var num = this.id.match(/\d+$/)[0]; 
    $(this).hover(function() { 
     $("#poptext" + num).toggle(); 
    }); 
});

或本：

試試看：http://jsfiddle.net/xFR3s/3/

$("[id^=homelink]").each(function() { 
    $(this).hover(setUpHover(this.id.match(/\d+$/)[0])); 
}); 

function setUpHover(num) { 
    return function() { 
     $("#poptext" + num).toggle(); 
    }; 
}

來源

2010-07-07 21:06:35 user113716

你爲什麼不帶班創建一個元素，所以你可以這樣做：

jQuery('.homelink').each(function() { 
    var me = jQuery(this); 
    var target = me.find('.poptext'); //if the target is 'poptext' class 
    me.hover(
     function() { 
      target.show(); 
     }, 
     function() { 
      target.hide(); 
     } 
    ); 
});

來源

2012-05-11 08:23:19

使用jquery進行DRY編程

回答

相關問題