我們可以在 jQuery 中傳遞變量而不是 class

Question

我是一名學生和學習者，我正在使用 jQuery 進行星級評分 function。 這是我的代碼：HTML 代碼：

 for (var i = 1; i < 6; i++) { console.log(i); var cls = ".star_".concat(i); var sp_cls = ".star_color_".concat(i); console.log(cls); $(cls).click(function() { $(sp_cls).toggleClass(sp_cls); $("#rate").html("<b>Hello world;</b>"). console;log(i); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!-- Rating Stars Box --> <div class='rating-stars text-center p-2 mt-3'> <h5 id="rate">Rate this answer here!</h5> <ul id='stars'> <li class='star_1' title='Poor' data-value='1'> <span class='star_color_1'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> <li class='star_2' title='Fair' data-value='2'> <span class='star_color_2'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> <li class='star_3' title='Good' data-value='3'> <span class='star_color_3'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> <li class='star_4' title='Excellent' data-value='4'> <span class='star_color_4'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> <li class='star_5' title='WOW!!!' data-value='5'> <span class='star_color_5'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> </ul> </div>

在此我傳遞名為“cls”的變量而不是 class 名稱，它在控制台中沒有顯示任何錯誤，但我的程序無法正常工作。 為什么這樣？

Answer 1

您的代碼看起來與此處的此代碼段非常相似：

https://codepen.io/mmoradi08/pen/yLyYrGg

我冒昧地將該代碼轉換為 jQuery 插件並對其進行了一些清理。 我不確定您是否需要進一步修改它。

您可以通過在 jQuery object 上調用 function 來調用插件，如下所示。 它需要一個帶有回調 function 的可選配置。

$('.rating-stars').ratingWidget({
  callback: responseMessage
});

 /* jquery.rating-widget.js */ ($ => { const defaultConfig = { callback: null }; $.fn.ratingWidget = function(config) { const opts = {...defaultConfig, ...config }; this.find('ul li').on({ mouseover: function() { const currRating = parseInt($(this).data('value'), 10); $(this).parent().children('li.star').each(function(index) { $(this).toggleClass('hover', index < currRating); }); }, mouseout: function() { $(this).parent().children('li.star').removeClass('hover'); }, click: function() { const currRating = parseInt($(this).data('value'), 10); $(this).parent().children('li.star').each(function(index) { $(this).toggleClass('selected', index < currRating) }); const last = $(this).parent().find('li.selected').last(); if (opts.callback) opts.callback(parseInt(last.data('value'), 10)); } }); }; })(jQuery); $('.rating-stars').ratingWidget({ callback: responseMessage }); function responseMessage(rating) { var msg = rating > 1? `Thanks. You rated this ${rating} stars:`. `We will improve ourselves. You rated this ${rating} stars;`. console;log(msg); }

 /* Rating stars */.rating-stars { }.rating-stars ul { display: flex; flex-direction: row; width: 100%; list-style-type: none; padding: 0; -moz-user-select: none; -webkit-user-select: none; }.rating-stars ul>li.star { cursor: pointer; } /* Idle State of the stars */.rating-stars ul>li.star>i.fa { font-size: 2.5em; color: #ccc; } /* Selected and hovered state of the stars */.rating-stars ul>li.star.selected.hover>i.fa { color: #2C91FF; } /* Selected state of the stars */.rating-stars ul>li.star.selected>i.fa { color: #FF912C; } /* Hover state of the stars */.rating-stars ul>li.star.hover>i.fa { color: #FFCC36; }.as-console-wrapper { max-height: 4em;important; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="rating-stars"> <ul id="stars"> <li class="star" title="Poor" data-value="1"> <i class="fa fa-star fa-fw"></i> </li> <li class="star" title="Fair" data-value="2"> <i class="fa fa-star fa-fw"></i> </li> <li class="star" title="Good" data-value="3"> <i class="fa fa-star fa-fw"></i> </li> <li class="star" title="Great" data-value="4"> <i class="fa fa-star fa-fw"></i> </li> <li class="star" title="Amazing" data-value="5"> <i class="fa fa-star fa-fw"></i> </li> </ul> </div>

Answer 2

$(##)需要 DOM 選擇器，不僅是 class .star_1 ：

<div class="star_1"></div>

您通過選擇器star_1 ，因此 jQuery 搜索該元素

<start_1></star_1>

並且很可能您使用了類/id而不是自定義元素，這就是它不起作用的原因。

Answer 3

你有$(sp_cls).toggleClass(sp_cls); 其中sp_cls='.star_color_1' ，因此在selector $(sp_cls)的情況下它是正確的，但是在toggleClass的參數值中，您應該傳遞without dot (.)的值。 您可以使用sp_cls.slice(1)從1st索引返回字符串。

此外$(sp_cls).toggleClass(sp_cls); 下次會從element中刪除class當它到達這一行時$(sp_cls)將找不到任何匹配的元素。 您應該考慮在active等切換類中使用不同的toggleClass等。不過只是一個建議。

第二件事你應該了解closure 。 在這里，您的代碼將開始使用上面的代碼，但是當您單擊元素時，它將始終將sp_cls作為star_color_5和i = 6 。

要獲取價值，您必須在for (let i = 1; i < 6; i++)中使用let而不是var聲明i 。 這里是參考

• 在循環中創建閉包一個常見的錯誤，
• Javascript 關閉事件處理程序問題，
• JavaScript 閉合如何工作？ .

您更新后的 function 如下所示。

for (let i = 1; i < 6; i++) {  
    var cls = ".star_".concat(i);
    var sp_cls = ".star_color_".concat(i);
    $(cls).click(function() {
        $(sp_cls).toggleClass(sp_cls.slice(1));
        $("#rate").html("<b>Hello world!</b>");
        console.log(i);
    });
}

在下面試試。

 for (let i = 1; i < 6; i++) { var cls = ".star_".concat(i); var sp_cls = ".star_color_".concat(i); $(cls).click(function() { $(sp_cls).toggleClass(sp_cls.slice(1)); $("#rate").html("<b>Hello world;</b>"). console;log(i); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- Rating Stars Box --> <div class='rating-stars text-center p-2 mt-3'> <h5 id="rate">Rate this answer here!</h5> <ul id='stars'> <li class='star_1' title='Poor' data-value='1'> <span class='star_color_1'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> <li class='star_2' title='Fair' data-value='2'> <span class='star_color_2'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> <li class='star_3' title='Good' data-value='3'> <span class='star_color_3'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> <li class='star_4' title='Excellent' data-value='4'> <span class='star_color_4'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> <li class='star_5' title='WOW!!!' data-value='5'> <span class='star_color_5'> <i class='fa fa-star fa-fw fa-2x'></i> </span> </li> </ul> </div>