Question

晚上好，晚上好，无论你身在何处，我只是网络开发的初学者，正在开展一个小小的学习项目。

我有一个问题（我相信这很简单，但我不知道该怎么办）

我有这个代码，我试图根据每个值的值填充费率星：

$.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}

for (i = 1; i< 3 ; i++) {
    var val = 'input[name=amount'+i+']';
    var id = 'saj' + i;
    var submit = '#sa' + i;
    var extendedId = '#so' + i;

    $(function() {          
        $(submit).click(function() {
            $(extendedId).html('<span id = "'+id+'" class="stars">'+parseFloat($(val).val())+'</span>');
            $('#'+id).stars();
        });         
        $(submit).click();
    });
}

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

.sajed {
    display :none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class = "sajed" type="text" name="amount1" value="2.5" />
<input id = "sa1" class = "sajed" type="submit" value="update"/>
<p id = "so1" ><span >2.4618164</span></p>

<input class = "sajed" type="text" name="amount2" value="4" />
<input id = "sa2" class = "sajed" type="submit" value="update"/>
<p id = "so2"><span >2.4618164</span></p>

我从互联网获取此代码，我需要多次添加它，如果我重复html，css（具有不同的类名）和jquery的函数，它就可以工作。

我想要做的是多次添加html代码并在其上使用相同的css和JQuery

我必须使用星号元素，我在for循环中调用上面的函数，但只有循环中的LAST元素才有效。

当我开始从0到1的for循环时，只有FIRST星星得到了形状当我从0到2开始for循环时，只有SECOND星星得到了形状当我从0到3开始for循环时，发生了什么。

我很抱歉这个糟糕的插图，但我希望你从代码和我得到的结果的下一张图片中得到我的意思

第一个发生在循环结束于索引1时，第二个发生在结束于2时，第三个发生在结束于索引大于2时

Screen Shot

Answer 1

你的循环在任何点击处理程序执行之前完成，因此你的变量将被设置为它们的最终值，为你提供你所看到的效果。

您可以使用let而不是var来解决此问题：这样变量（如id）变为for循环块的本地变量，以及事件处理程序函数将引用正确的函数。

您应该在$.fn.star中更正的另一件事：jQuery插件函数将this设置为应用该方法的jQuery集合。这意味着它已经是jQuery，你不应该在this中包裹$(this)。只需this.each(...)。

Answer 2

实际上，我认为您的插件和.each()中不需要for loop循环..您可以将代码设为这样

＆＃13;

$.fn.stars = function() {
    return //$(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    //});
}
$(function() {          
    $('input[id^="sa"]').on('click',function(e) {
        e.preventDefault();
        var ThisIt = $(this);
        ThisIt.next('[id^="so"]').html('<span class="stars">'+parseFloat(ThisIt.prev('input[name^="amount"]').val())+'</span>');
        ThisIt.next('[id^="so"]').find(' > span').stars();
    }).click();
});

＆＃13;

span.stars, span.stars span {
    display: block;
    background: url(http://placehold.it/350x150) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

.sajed {
    /*display :none;*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class = "sajed" type="text" name="amount1" value="2.5" />
<input id = "sa1" class = "sajed" type="submit" value="update"/>
<p id = "so1" ><span >2.4618164</span></p>

<input class = "sajed" type="text" name="amount2" value="4" />
<input id = "sa2" class = "sajed" type="submit" value="update"/>
<p id = "so2"><span >2.4618164</span></p>

＆＃13;

如何为不同的html元素执行相同的JQuery代码？

2 个答案: