使用什么来代替JQuery val（）作为值

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

范例

小组室

演讲室

像这样的东西应该可以做到：

<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>

小组室

演讲室

var$booking\u search=$（“.booking\u search\u cat”）；
$booking\u search.单击（函数（）{
$booking_search.filter（“.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
警报（“值为”+$（此）.data（“值”）；
});

像这样的东西应该可以做到：

<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>

小组室

演讲室

var$booking\u search=$（“.booking\u search\u cat”）；
$booking\u search.单击（函数（）{
$booking_search.filter（“.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
警报（“值为”+$（此）.data（“值”）；
});

您可以使用

数据val

属性

小组室

演讲室

$（“.booking\u search\u cat”）。单击（函数（）{
警报（$（this.data（'val'））；
});

您可以使用

数据val

属性

小组室

演讲室

$（“.booking\u search\u cat”）。单击（函数（）{
警报（$（this.data（'val'））；
});

您只需将

数据-*

属性添加到类别：

<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>

---

您只需将

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>

使用数据属性

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

使用数据属性

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

您可以在

click

处理程序中使用来确定单击了哪些节点（按DOM节点的顺序）：

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

编辑：正如Lix指出的，

.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.
});

---

编辑：正如Lix指出的，

.index（）

需要一个选择器，以便在计算索引时忽略同级。演示链接已更新。

您可以使用

index（）

函数来确定单击了哪个元素-

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

index（）

函数返回元素的索引（如名称所示）。文档对返回值有这样的描述-

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

---

您可以使用

index（）

函数来确定单击了哪个元素-

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

index（）

函数返回元素的索引（如名称所示）。文档对返回值有这样的描述-

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

---

我在你的html中看不到1或2。你认为这是从哪里来的？div的索引？为什么不使用按钮？按钮是具有值属性的可单击DOM元素？我不希望值飞来，但是attribute value=“someval”对div无效。我很高兴看到您接受了我的答案（谢谢！），但是我觉得我的技术可能更好：）我在html中看不到1或2。你认为这是从哪里来的？div的索引？为什么不使用按钮？按钮是具有值属性的可单击DOM元素？我不希望值飞来，但是属性value=“someval”对div无效。我很高兴看到您接受了我的答案（谢谢！），但是我觉得my可能是一种更好的技术：）您需要为索引函数指定一个选择器，否则它将考虑所有同级元素，而不仅仅是

.booking\u search\u cat

元素。@Lix谢谢，我没有领会这一点。

.index（）

可以接受选择器来有效地忽略同级元素。有鉴于此，我倾向于使用其他答案中所述的

数据
方法作为更有效的解决方案。您需要为索引函数指定一个选择器，否则它将考虑所有同级元素，而不仅仅是
.booking\u search\u cat
元素。@Lix谢谢，没有捕捉到
。index（）
可以接受选择器以有效忽略同级。有鉴于此，我倾向于使用其他答案中概述的
数据
方法作为更有效的解决方案，而不是此方法。