如何創建一個jQuery偵聽器來遍歷一些標記

我正在尋找創建一個簡單的工具提示元素（星級評分），我希望能夠懸停在每個開始和不同的消息出現。如何創建一個jQuery偵聽器來遍歷一些標記

我面對的問題是星標的輸出不給每個星星一個唯一的標識符，所以我必須迭代每個星星的集合，併爲每個星星應用一個聽衆。

每個星1-5將具有相同的消息，例如，星1 =消息1，星2 =消息2等

如果有人可以幫助，我想一些幫助瞭解如何創建監聽器和HTML和消息應用到特定的明星，我想要做的這與jQuery。

這裏是星標記輸出

<div class="stars"> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">1</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">2</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">3</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">4</a> 
    </div> 
    <div class="ui-stars-star ui-stars-star-on ui-stars-star-disabled"> 
     <a title="">5</a> 
    </div> 

    <input type="hidden" value="5" name="rate_overall" disabled=""/> 
</div>

感謝

來源

2012-03-14 zizther

您可以在同一事件監聽器綁定到每一個元素，當它的（使用$(this)這對於不同的元素是不同的）執行檢查的文本：

$(".ui-stars-star").mouseover(function() { 
    var text = $(this).find("a").text(); // e.g. "1" or "2" 

    // now use `text` to fetch the correct message and show it 
});

來源

2012-03-14 16:46:44 pimvdb

謝謝，只是讓我明白了，怎麼會變成這樣查找明星是在展現特殊信息？ – zizther 2012-03-15 17:34:23

@zizther：jQuery基本上是以這樣一種方式創建的，這個'this'是指派發事件的元素。所以，懸停另一個元素會產生不同的'$（this）'，因此也會產生不同的'$（this）.text（）'。 – pimvdb 2012-03-15 17:35:54

爲什麼迭代？你有你的明星一類這樣一個電話將工作：

$('.ui-stars-star') 
    .on('mouseenter', function() { 
    ... 
    }) 
    .on('mouseleave', function() { 
    })

然而，這是特別有效，因爲它註冊在其上有這個類的每一個元素上的處理程序。這就是說，這也是你當前的代碼所能做的。

，這種交易是使用事件委託，採用.on三個參數版本：

$('.ui-stars-star', document, function() { ... });

這裏的缺點，雖然是CPU效率 - jQuery中委派處理系統將要求每一個鼠標移動在頁面上。

來源

2012-03-14 16:50:19 Alnitak

謝謝。它將如何知道顯示特定消息的明星是什麼，例如，將鼠標懸停在明星1上應顯示消息1，將鼠標懸停在明星2上顯示消息2，等等。 – zizther 2012-03-15 17:32:57

@zizther'$（this）.index（）'會在當前列表中爲您提供明星的位置（基於零）。 – Alnitak 2012-03-15 20:14:45

您可以使用index()函數。即：

$('.ui-stars-star').mouseenter(function() { 
    switch ($(this).index()) { .. 
}

來源

2012-03-14 16:59:01

謝謝，就這樣我明白，這將如何找到明星是什麼來顯示特定的消息？ – zizther 2012-03-15 17:34:55

你可以使用jQuery的:contains選擇抓住它的文本元素：

$(".ui-stars-star a:contains(1)") 
$(".ui-stars-star a:contains(2)") 
...so on

來源

2012-03-14 17:08:40

謝謝，這看起來很有用 – zizther 2012-03-15 17:34:48

如何創建一個jQuery偵聽器來遍歷一些標記

回答

相關問題