Jquery如何停止追加附加上一个元素

Question

我无法展示每家酒店的明星，也不确定如何去做。我有5家酒店，每家都有不同的hotelStar值。

我的Javascript代码：

<input  type="checkbox" id="chkbx" value="1" onclick="test()" name="value_r" id="value_r"/>

<div id="val"></div>

我的HTML代码是：

function GetStarHotel() {
    var parent    = $(' p.star '),
        imagePath = 'image/hotelstar.png',
        img;
for (var i = 0; i < hotelStar; i++) {
        img = new Image();
        img.src = imagePath;    
        $(parent).append('<img src="image/hotelstar.png" class="hotelStar" />')
    }

}

它正在添加我之前的酒店之星。如何防止它添加相同的元素？

Answer 1

您可以使用append()而不是.html()，而是检查下面的更新代码

function GetStarHotel() {
    var parent    = $(' p.star '),
        imagePath = 'image/hotelstar.png',
        img,
        star = '';
    for (var i = 0; i < hotelStar; i++) {
            img = new Image();
            img.src = imagePath;    
            star += '<img src="'+imagePath +'" class="hotelStar" />';
        }
    $(parent).html(star)

}

  

我简化了您的代码。查看下面的更新代码段

＆＃13;

＆＃13;

$('p.star').each(function(){
    count = $(this).data('star'),
    star = '',
    imagePath = 'http://www.freeiconspng.com/uploads/download-png-image-star-png-image-1.png';
    for (var i = 0; i < count; i++) {
        star += '<img src="'+imagePath +'" width="16" class="hotelStar" alt="'+i+'" />';
    }
    $(this).html(star)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hotel 1</h1>
<p class="star" data-star ="4" ></p>
<h1>Hotel 2</h1>
<p class="star" data-star ="3"></p>
<h1>Hotel 3</h1>
<p class="star" data-star ="2"></p>

＆＃13;

＆＃13;

＆＃13;