当我选择图像图像名称应使用 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(){

   a=$(this).prop('id')

});

function add() {

if(a==="Chocolate")

  {

    alert("Chocolate");

  } else if(a==="Venila")

  {

    alert("Venila");

  } else if(a==="Strawberry")

  {

    alert("Strawberry");

  } else if(a==="MixFruit")

  {

    alert("Mixfruit");

  } else{

    alert("Mango");

  }

  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<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" id="Mango" 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>

Answer 2

你可以用简单的javascript来做。对于每个 div，您可以设置一个事件侦听器，例如 onclick；

例如：

<div id="mongo" onclick="mongo()">

在js中

function mongo(){

 window.alert("mongo selected");

/* ORRR document.write("mongo selected"); depending on the kind of message ur trying 

 to display */ 

  }

你可以为 div 的其余部分做这件事，是的，你可以肯定你可以循环，但你在 js 中可能不太好，所以继续为所有 div 做