jQuery-如何从同一个类中的隐藏输入ID中获得不同的值？

Question

我想从同一个类中的隐藏输入ID中获得不同的值。 这是我尝试创建的html和jQuery的一些示例代码。

 <li>
   <div class="test"><img src="course.png"/><p class="text">Computer</p>
    <span class="list">
      <p>Course 1 <input type="hidden" id="id1" value="1"></p>
      <p>Course 2 <input type="hidden" id="id2" value="2"></p>
      <p>Course 3 <input type="hidden" id="id3" value="3"></p>
    </span> 
   </div>
  </li>

我正在尝试创建的代码

$(".test p").click(function(){
    var id= $(this).find('#id1').val(); 
    var id= $(this).find('#id2').val();
    var id= $(this).find('#id3').val();
    alert(id);    // will return value 1 or 2 or 3 if click on any course
});

Answer 1

不要使用“ id”作为变量名。

这应该工作：

$(".test p").click(function(){
    var myID = $(this).find('input').val(); 
    alert(myID);    // will return value 1 or 2 or 3 if click on any course
});

jsFiddle演示

Answer 2

最好为p和input标签设置类，而不要使用id

 <li>
   <div class="test"><img src="course.png"/><p class="text">Computer</p>
    <span class="list">
      <p class="myCourse">Course 1 <input type="hidden" class="myCourseVal" value="1"></p>
      <p class="myCourse">Course 2 <input type="hidden" class="myCourseVal" value="2"></p>
      <p class="myCourse">Course 3 <input type="hidden" class="myCourseVal" value="3"></p>
    </span> 
   </div>
  </li>

$(".test .myCourse").click(function(){
    var myValue = $(this).find('.myCourseVal').val()); 
    alert(myValue);
});

最好使用class而不是input tag ，因此，如果将来添加其他输入，则可以根据需要正确获取值。

如果你不使用类，你的愿望p如果你点击S上Computer代码将开始运行。

如果要获得课程名称中包含的课程值，请执行以下操作：

$(".test .text").click(function(){
   var x = [];
   foreach('.myCourse',function(){
       x.push($(this).find('.myCourseVal').val(); 
   })
   alert(x);
});