使用html和javascript添加明星到喜歡

嗨下面的代碼我創建了評級明星。使用html和javascript添加明星到喜歡

<body> 
<button id="onestar"><span class="glyphicon glyphicon-star-empty" onclick="ratingFunction('1')"></span></button> 
             <button id="onestarfill" hidden><span class="glyphicon glyphicon-star" style="color:yellow" id="onestar" onclick="ratingFunction('1')" ></span></button> 
             <button id="twostar"><span class="glyphicon glyphicon-star-empty" id="twostar" onclick="ratingFunction('2')"></span></button> 
             <button id="twostarfill" hidden><span class="glyphicon glyphicon-star-empty" style="color: yellow" id="twostar" onclick="ratingFunction('2')" hidden></span></button> 
             <button id="threestar"><span class="glyphicon glyphicon-star-empty" id="threestar" onclick="ratingFunction('3')"></span></button> 
             <button id="threestarfill" hidden><span class="glyphicon glyphicon-star-empty" style="color: yellow"id="threestar" onclick="ratingFunction('3')" hidden></span></button> 
             <button id="fourstar"><span class="glyphicon glyphicon-star-empty" id="fourstar" onclick="ratingFunction('4')"></span></button> 
             <button id="fourstarfill" hidden><span class="glyphicon glyphicon-star-empty" style="color: yellow"id="fourstar" onclick="ratingFunction('4')" hidden></span></button> 
             <button id="fivestar"><span class="glyphicon glyphicon-star-empty" id="fivestar" onclick="ratingFunction('5')"></span></button> 
             <button id="fivestarfill" hidden><span class="glyphicon glyphicon-star-empty" style="color: yellow"id="fivestar" onclick="ratingFunction('5')" hidden></span></button> 
<script> 
function ratingFunction(intValue){ 
    var finder_id=<?php echo $rowpic['f_id']?>; 
    var user_id="<?php echo $_SESSION['Uid'];?>";//document.getElementById("#user_id_of_rater").value; 
    var action='rate_to_finder'; 
    var rate=intValue; 

    if(intValue=='1') 
    { 
     $.post('db/db_add_star_rate.php',{'user_id':user_id ,'action':action, 'rate':rate,'finder_id':finder_id},function(data){ 
      alert(data); 
      }); 
     $("#onestar").hide(); 
     $("#onestarfill").show(); 


    } 
    else if(intValue=='2') 
    { 
     $.post('db/db_add_star_rate.php',{'user_id':user_id ,'action':action, 'rate':rate,'finder_id':finder_id},function(data){ 
      alert(data); 
      }); 
     $("#twostar").hide(); 
     $("#twostarfill").show(); 

    } 
    else if(intValue=='3') 
    { 
     $.post('db/db_add_star_rate.php',{'user_id':user_id ,'action':action, 'rate':rate,'finder_id':finder_id},function(data){ 
      alert(data); 
      }); 
     $("#threestar").hide(); 
     $("#threestarfill").show(); 
    } 
    else if(intValue=='4') 
........ 
} 
</script> 
</body>

所以我要當我的ID點擊= 'threestar' 的話，那下面的IDS萬事達旅店，twostar和threestar穿鞋隱藏。並應顯示onestarfil，twostarfil和threestarfil。我怎樣才能做到這一點。

來源

2015-09-10 sanji

我試圖像 '否則，如果（==的intValue '3'）{ ............... $ （」 #threestar，＃thowstar，#onestar「）.hide（）; （「＃threestarfill ,,＃thowstarfill，#onestarfill」）。show（）; }' 但它不起作用 – sanji

這麼多的複製和粘貼。這是一個糟糕的設計。沒有必要複製和粘貼太多，因爲您可以使用變量並在一次Ajax調用中使用它。爲什麼不突出開關班，不顯示/隱藏元素？ – epascarello

基本思想沒有所有的ifs和其他，並且不需要每個狀態的多個按鈕。

$(".stars").on("click", "button", function() { 
 
    $(this) //the button that was clicked 
 
    .prevAll("button") //find previous buttons 
 
    .addBack() //add in the button that was clicked 
 
     .find("span") //find the spans in the butto 
 
      .addClass("glyphicon-star") //check the star 
 
      .removeClass("glyphicon-star-empty"); //uncheck the star 
 
    $(this) 
 
    .nextAll("button") 
 
     .find("span") 
 
      .removeClass("glyphicon-star") 
 
      .addClass("glyphicon-star-empty"); 
 
    
 
    console.log(this.value); //the value of the star that was selected 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="stars"> 
 
    <button value="1"><span class="glyphicon glyphicon-star-empty"></span> 
 
    </button> 
 
    <button value="2"><span class="glyphicon glyphicon-star-empty"></span> 
 
    </button> 
 
    <button value="3"><span class="glyphicon glyphicon-star-empty"></span> 
 
    </button> 
 
    <button value="4"><span class="glyphicon glyphicon-star-empty"></span> 
 
    </button> 
 
    <button value="5"><span class="glyphicon glyphicon-star-empty"></span> 
 
    </button> 
 
</div>

來源

2015-09-10 12:47:08 epascarello

使用html和javascript添加明星到喜歡

回答

相關問題