当我选择图像图像名称应使用 jquery 显示

Question

当我单击图像并单击添加按钮时，图像名称应显示在警报消息中。但它现在正在工作。到目前为止，如果我单击 Chocolate image alert msg 显示的 Chocolate 与我需要做的一样，我在下面附上了代码。

这是表格

 <div class="form-group">

      <div >

           <img class="photo" id="Chocolate" src="images/chocolate-ice.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal"    >

    <b>Chocolate</b>

     </div>

   <div>

     <img src="images/mango.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

  <b>Mango</b>

     </div>

       <div  >

         <img class="photo" id="Venila" src="images/venila.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

          <b>Venila</b>

             </div>

               <div >

                <img class="photo" id="Strawberry" src="images/sww.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">

                  <b>Strawberry</b>

                  </div>

                  <div>

                 <img class="photo" id="MixFruit" src="images/mixfruit.jpg" width="100" height="100" >

            <b>MixFruit</b>

              </div>

  <input type="button" class="btn btn-info" value="ADD" onclick="add()">

               </div>

               </form>

如果我点击 Chocolate 图像警报 msg 显示的 Chocolate 与我需要做的 jQuery 一样

function add()

{

if("Chocolate")

    {

    alert("Chocolate");

    }

else if("Venila")

{

    alert("Venila");

}

else if("Strawberry")

{

  alert("Strawberry");

}

else if("Mixfruit")

{

    alert("Mixfruit");

}

Answer 1

尝试如下：var a="";//on click of image get id value$("img").on("click",function(){&nbsp; &nbsp;a=$(this).prop('id')});function add() {if(a==="Chocolate")&nbsp; {&nbsp; &nbsp; alert("Chocolate");&nbsp; } else if(a==="Venila")&nbsp; {&nbsp; &nbsp; alert("Venila");&nbsp; } else if(a==="Strawberry")&nbsp; {&nbsp; &nbsp; alert("Strawberry");&nbsp; } else if(a==="MixFruit")&nbsp; {&nbsp; &nbsp; alert("Mixfruit");&nbsp; } else{&nbsp; &nbsp; alert("Mango");&nbsp; }&nbsp; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><div class="form-group">&nbsp; <div>&nbsp; &nbsp; <img class="photo" id="Chocolate" src="images/chocolate-ice.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">&nbsp; &nbsp; <b>Chocolate</b>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <img src="images/mango.jpg" id="Mango" width="100" height="100" data-toggle="modal" data-target="#exampleModal">&nbsp; &nbsp; <b>Mango</b>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <img class="photo" id="Venila" src="images/venila.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">&nbsp; &nbsp; <b>Venila</b>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <img class="photo" id="Strawberry" src="images/sww.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">&nbsp; &nbsp; <b>Strawberry</b>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <img class="photo" id="MixFruit" src="images/mixfruit.jpg" width="100" height="100">&nbsp; &nbsp; <b>MixFruit</b>&nbsp; </div>&nbsp; <input type="button" class="btn btn-info" value="ADD" onclick="add()"></div></form>

Answer 2

你可以用简单的javascript来做。对于每个 div，您可以设置一个事件侦听器，例如 onclick；例如：<div id="mongo" onclick="mongo()">在js中function mongo(){&nbsp;window.alert("mongo selected");/* ORRR document.write("mongo selected"); depending on the kind of message ur trying&nbsp;&nbsp;to display */&nbsp;&nbsp; }你可以为 div 的其余部分做这件事，是的，你可以肯定你可以循环，但你在 js 中可能不太好，所以继续为所有 div 做