جار التحديث ...
جار التحديث ...

كيف اعمل تقييم النجوم في الجافا سكربت

  • 0

عمل تقييم النجوم  اي عند الضغط عليه يظهر نص بجانب النجوم 

إجابات المستخدمين (13)


وهنا الحل بدون jquery 

 

 

<div>
<ul>
  <li onclick="getElementById('result').innerHTML = 'bad'"><i class="fa fa-star"></i></li>
  <li onclick="getElementById('result').innerHTML = 'not bad'"><i class="fa fa-star"></i></li>
  <li onclick="getElementById('result').innerHTML = 'almost there'"><i class="fa fa-star"></i></li>
  <li onclick="getElementById('result').innerHTML = 'getting close'"><i class="fa fa-star"></i></li>
  <li onclick="getElementById('result').innerHTML = 'great'"><i class="fa fa-star"></i></li>
</ul>
  <span id="result"></span>
</div>
div{
  width:800px;
  border:2px solid #000;
  height:50px;
}

ul{
  width:350px;
  list-style-type:none;
  border:1px solid #000;
  float:left;
}
ul li{
  display:inline;
  margin-right:40px;
}
#result{
  float:right;
  text-align:center;
}

  • 0
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد

اتضحت المشكلة , واليك الحل

 

<div>
<ul>
  <li id="1"><i class="fa fa-star"></i></li>
  <li id="2"><i class="fa fa-star"></i></li>
  <li id="3"><i class="fa fa-star"></i></li>
  <li id="4"><i class="fa fa-star"></i></li>
  <li id="5"><i class="fa fa-star"></i></li>
</ul>
  <span id="result"></span>
</div>

css

div{
  width:800px;
  border:2px solid #000;
  height:50px;
}

ul{
  width:350px;
  list-style-type:none;
  border:1px solid #000;
  float:left;
}
ul li{
  display:inline;
  margin-right:40px;
}
#result{
  float:right;
  text-align:center;
}

js

$("#1").click(function(){
  $("#result").html("Bad")
});

$("#2").click(function(){
  $("#result").html("Not So Bad")
});

$("#3").click(function(){
  $("#result").html("Almost There")
});

$("#4").click(function(){
  $("#result").html("Getting Close")
});

$("#5").click(function(){
  $("#result").html("Great!")
});


//naqrah.net

Codepen

https://codepen.io/SyrainaArts/pen/qJggoR

 


  • 0
رد على التعليق (1)

الردود :


<p>شكرا استاذ اتمنى لك كل التوفيق</p> <p>&nbsp;</p>


سجل الدخول لاضافة رد
  • شريك الإطلاق
  • عضو جديد
  • قبل أشهر 7

<div>

<ul>

  <li id="1"><i class="fa fa-star"></i></li>

  <li id="2"><i class="fa fa-star"></i></li>

  <li id="3"><i class="fa fa-star"></i></li>

  <li id="4"><i class="fa fa-star"></i></li>

  <li id="5"><i class="fa fa-star"></i></li>

</ul>

  <span id="result"></span>

</div>


  • 0
رد على التعليق (1)

الردود :


<p>شكرا</p> <p>&nbsp;</p>


سجل الدخول لاضافة رد

لا زلت غير قادر على فهم المشكلة , ان كان يوجد لديك صورة توضيحية او شيئ من هذا القبيل ساكون أكثر من سعيد بالمساعدة


  • 0
رد على التعليق (4)

الردود :


<p>لا استطيع اضافه صوره هنا</p> <p>&nbsp;</p>

<p><img src="https://www.naqrah.net/icons/logo-fill.jpg" alt="Naqrah Logo" width="200" height="200" /></p> <p>لماذا ؟ ما المشكلة ؟</p>

<p>لا استطيع اضافه صوره هنا</p> <p>&nbsp;</p>

<pre class="language-markup"><code>&lt;fieldset class="score"&gt; &lt;legend&gt;Score:&lt;/legend&gt; &lt;input type="radio" id="score5" name="score" value="5"/&gt; &lt;label title="5 stars" for="score5"&gt;5 stars&lt;/label&gt; &lt;input type="radio" id="score4" name="score" value="4"/&gt; &lt;label title="4 stars" for="score4"&gt;4 stars&lt;/label&gt; &lt;input type="radio" id="score3" name="score" value="3"/&gt; &lt;label title="3 stars" for="score3"&gt;3 stars&lt;/label&gt; &lt;input type="radio" id="score2" name="score" value="2"/&gt; &lt;label title="2 stars" for="score2"&gt;2 stars&lt;/label&gt; &lt;input type="radio" id="score1" name="score" value="1"/&gt; &lt;label title="1 stars" for="score1"&gt;1 stars&lt;/label&gt; &lt;/fieldset&gt;</code></pre>


سجل الدخول لاضافة رد

في حال اني لم افهم سؤالك تماماً , فاعتقد ان اظهار نص عند عمل Hover يتم كالتالي :

$('.selector').hover(
    $(".other-selector").show();
  )};

  • 0
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد
سجل الدخول لاضافة اجابة جديدة


ملئ الشاشة

اضافة سؤال جديد