使用jQuery單擊輸入單選按鈕時更改跨度的文本值

Question

我要輸入“費用！ （62）”中的“費率”類別更改為“費率！ （63）'，當用戶點擊其中一個輸入單選按鈕時。

困難在於我有很多“星” div，因此此更改只能發生在封閉的“星” div的下一個跨度子孫中。

   <div class="stars float-left">
    <div class="rating" style="width:99%"></div>
    <p><input type="radio" name="rating" id="star5" value="5"><label for="star5"></label><input type="radio" name="rating" id="star4" value="4"><label for="star4"></label><input type="radio" name="rating" id="star3" value="3"><label for="star3"></label><input type="radio" name="rating" id="star2" value="2"><label for="star2"></label><input type="radio" name="rating" id="star1" value="1"><label for="star1"></label>
    </p>
    <span class="rate">Rate! (62)</span>
</div>

我是jQuery的新手，這是我直到現在才想到的，但是它不起作用。 我認為我在此過程中有些困惑：

('.rating input:radio').click(function() {
    var str_rate = $(obj).closest('span').next().find('.rate');
    //TODO: parse the current value and add 1 to it
    $(str_rate).html(str);
}

有什么我完全想念的嗎？

更新： 這個jsfiddle顯示了直到現在考慮答案的進度，但是仍然無法正常工作。

Answer 1

您的問題是您的選擇器找到了span ，將其更改為：

$(obj).parents('.stars').find('.rate');

因此，我們得到了父stars元素，然后得到了相關的.rate span 。

另外：您在click功能開始時就缺少了$ 。 和); 從結尾開始。

Answer 2

您可以按以下方式更改費率：

    var rate_string = $(str_rate).text();
    var rate = parseInt(rate_string.substring(rate_string.indexOf("(") + 1,rate_string.indexOf(")")),10) + 1;
    $(str_rate).text("Rate! " + rate);

但是請注意，您的選擇器出現問題，必須對其進行修改以獲取跨度區域。

這是我所做的所有代碼更改：

<div class="stars float-left">
<div class="rating" style="width:99%"></div>
<p>
    <input type="radio" name="rating" id="star5" value="5"><label for="star5"></label>
    <input type="radio" name="rating" id="star4" value="4"><label for="star4"></label>
    <input type="radio" name="rating" id="star3" value="3"><label for="star3"></label>
    <input type="radio" name="rating" id="star2" value="2"><label for="star2"></label>
    <input type="radio" name="rating" id="star1" value="1"><label for="star1"></label>
</p>
<span class="rate">Rate! (62)</span>

使用以下腳本

    $('input:radio').click(function (obj) {
    var str_rate = $(this).closest('div').find('span.rate');
    var rate_string = $(str_rate).text();
    var rate = parseInt(rate_string.substring(rate_string.indexOf("(") + 1,rate_string.indexOf(")")),10) + 1;
    $(str_rate).text("Rate! (" + rate + ")");
});

除了格式化，我認為我沒有更改html。

Answer 3

如果選擇器正確（str_rate），則可以通過var value = str_rate.val（）獲得該值（請參閱http://api.jquery.com/val/ ）。 然后，您可以再次使用該值，並再次通過.val（）方法將其重新設置為元素，僅這次，傳入新值，或者通過已經使用的.html（）。