Question

在div里面我现在设置一个值我想用class获取这个值。但是下面的代码不会返回值。我在做什么错了？我该怎么解决？

<div title="Find on Amazon" value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
  <i class="fa fa-bullseye"></i> 
</div>

$(".btnAmazon").on("click", function () {
  var d = $(".btnAmazon").val();
  alert(d);
});

Answer 1

在div里面我现在设置一个值我想用类
来获取这个值

看起来您正在寻找div

的val()属性

attr( "value" )用于输入元素，将其替换为var d = $(".btnAmazon").attr( "value" );

value

Answer 2

您正在尝试阅读div的“值”属性。

console.log($('div').val()) // This won't work; DIVs don't have a value
console.log($('div').attr('value')) // but this one has an attribute named value

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
  <i class="fa fa-bullseye"></i> 
</div>

请注意，严格来说，value不是有效属性 - 自XHTML时代以来，非标准属性应该具有data-或x-前缀 - 但它将在所有浏览器中正常工作。如果代码验证是一个问题，处理这个问题的“正确”方法是：

// either of these will work, interchangeably:
console.log($("div").data("value")) 
console.log($("div").attr("data-value"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
  <i class="fa fa-bullseye"></i> 
</div>

Answer 3

我可以看到您想要阅读<div>属性，该属性不能用于data-value代码。请使用data-value="396495"：

.data("value");

并使用：

.attr("value")

这是正确的方法。使用.center-block { display: block; margin-right: auto; margin-left: auto; }可能在某些浏览器中有效，并且不确定它是否在所有地方无缝运行。但这就是你所需要的。

Answer 4

要检索属性命名值（在您的示例中为352197909440），您需要使用

var d = $(".btnAmazon").attr('value');

.html（）会显示你Div中的html。即

<i class="fa fa-bullseye"></i>

Answer 5

div无法拥有value属性，这是无效的标记。

但是，您可以使用自定义data-*属性（正如您在代码中使用的那样）。

首先更改您的HTML

<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
  <i class="fa fa-bullseye"></i> 
</div>

然后你可以使用$('.btnAmazon').data('value')来获取它的价值......

工作示例：

＆＃13;

$(".btnAmazon").on("click", function () {
  var d = $(".btnAmazon").data('value');
  alert(d);
});

＆＃13;

/* for the demo */
div {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
  <i class="fa fa-bullseye"></i> 
</div>

＆＃13;

Answer 6

我认为＆＃34;价值＆＃34;作为div元素不允许的属性。试试这样：

＆＃13;

jQuery(document).ready(function($){
    $(".btnAmazon").on("click", function () {
      var d = $(this).attr("data-value");
      alert(d);
    });
});

＆＃13;

.btn{
  background: green;
  padding: 20px;
  text-align:center;
  display:inline-block;
  color:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div title="Find on Amazon" data-value="352197909440" class="btn btn-default 
       btnAmazon" data-toggle="modal" data-
       target="#FindOnAmazonModal">
       <i class="fa fa-bullseye"></i> 
       Button
</div>

＆＃13;

使用class获取div的值

6 个答案: