jQuery - 如何从同一个类中的隐藏输入id获取不同的值?

时间:2015-02-26 17:45:52

标签: javascript jquery

我想从同一个类中的隐藏输入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
});

2 个答案:

答案 0 :(得分:2)

不要将“id”用作var名称。

这应该有效:

$(".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 Demo

答案 1 :(得分:1)

最好为你的p和输入标签设置类而不是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 Computer,你的代码就会开始运行。

如果您希望获得课程名称中的课程值:

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