Question

如果按下div，我需要从div中获取值1或2。我已经制作了一个脚本，在按下时将其设置为激活，但是如果按下第一个div，我似乎无法找到如何提取值1。 HTML值属性仅用于输入元素，在这种情况下，我希望它在div上。这怎么可能？

的实施例

<div class="booking_search_cat darkgrey active">
    <p>Group room</p>
</div>
<div class="booking_search_cat lightgrey">
    <p>Lecture room</p>
</div>

Answer 1

您只需在类别中添加data-*属性：

<div class="booking_search_cat darkgrey active" data-category="1">
    <p>Group room</p>
</div>
<div class="booking_search_cat lightgrey" data-category="2">
    <p>Lecture room</p>
</div>

现在，您所要做的就是在点击事件中提取该信息。

$('.booking_search_cat').on('click',function(){
  var categoryId = $(this).data('category');
  console.log(categoryId);
});

Answer 2

这样的事情可以解决问题：

<div class="booking_search_cat darkgrey active" data-value='group_room'>
  <p>Group room</p>
</div>

<div class="booking_search_cat lightgrey" data-value='lecture_room'>
  <p>Lecture room</p>
</div>

<script type='text/javascript'>
  var $booking_search = $(".booking_search_cat");

  $booking_search.click(function(){
    $booking_search.filter(".active").removeClass("active");
    $(this).addClass("active");

    alert("The value is "+$(this).data("value"));
  });
</script>

Answer 3

您可以使用data-val属性。 Fiddle here

<div class="booking_search_cat darkgrey active" data-val='1'>
    <p>Group room</p>
</div>
<div class="booking_search_cat lightgrey" data-val='2'>
    <p>Lecture room</p>
</div>

$(".booking_search_cat").click(function(){
    alert($(this).data('val'));
});

Answer 4

使用数据属性

<div data-val="1" ...

和

$(".bookingsearch").on("click",function() {
  $.post("someserverthing",{parm:$(this).data("val")},function(data) {
    alert(data);
  }
});

Answer 5

您可以使用index()函数来确定单击了哪个元素 -

$('.booking_search_cat').on('click',function(){
  var categoryId = $(this).index('.booking_search_cat');
  console.log(categoryId);
});

index()函数返回（如名称所示）元素的索引。文档说明了返回值 -

如果选择器字符串作为参数传递，则.index（）返回一个整数，指示jQuery对象中第一个元素相对于选择器匹配的元素的位置。如果找不到该元素，.index（）将返回-1。

Here is a very simple demo on jsFiddle

Answer 6

您可以在click处理程序中使用.index()来确定单击哪个（按DOM节点的顺序）：

$('.booking_search_cat').on('click', function() {
    alert($(this).index('.booking_search_cat')); // 0 if first was clicked, 1 if second was clicked, etc.
});

Demo Here

编辑：正如Lix所指出的，.index()需要一个选择器，以便在计算索引时忽略兄弟姐妹。演示链接已更新。

用什么代替JQuery val（）来表示值

6 个答案:

Here is a very simple demo on jsFiddle