JQuery在div中获得多个值

Question

我需要得到不同的数字。我有18个选择。当我选择一个div时，div的类通过JS代码变成.sm-select。我可以选择最多4个div，并且我希望得到div的值，例如："value 1，value 4，value 6，value 12"，并将它们存储在一个隐藏的输入字段中。这些值是文本字符串。

但是，目前在我的代码中使用".attr('value')“时，我只有第一个代码，并且在输入类型文本中显示它来测试它。

有人能教我怎么做吗？谢谢。

我的HTML：

<div class="col-xs-6 sm-6">
    <div class="decale sm-envies envie" value="Expo">
        <p>Expo</p>
    </div>
</div>
<div class="col-xs-6 sm-6">
    <div class="decale sm-envies envie" value="Extrême">
        <p>Extrême</p>
    </div>
</div>
<div class="col-xs-6 sm-6">
    <div class="decale sm-envies envie" value="Spa">
        <p>Spa</p>
    </div>
</div>
<div class="col-xs-6 sm-6">
    <div class="decale sm-envies envie" value="Nature">
        <p>Nature</p>
    </div>
</div>
<div class="col-md-12 whichenvie">
    <input type="text">
</div>

我的JS：

$(function(){
    $('.sm-envies').each(function() {
        $(this).click(function (){
            var Envie = $('.sm-select').attr('value');
            $( ".whichenvie>input" ).val(Envie);
        });
    });
});

Answer 1

调用attr对象上的jQuery函数将只返回选择器找到的第一个元素的属性值。要获得所有元素的属性值，您必须使用each函数迭代对象：

$(function () {
    $('.sm-envies').click(function () {
        var Envie = '';
        $('.sm-select').each(function () {
            Envie += $(this).attr('value') + ';';
        })
        $(".whichenvie>input").val(Envie);
    });
});

Answer 2

在html中，您不能创建自定义属性，除非您用“data-”(在本例中是“data-value”)对它们进行添加。如果元素是输入而不是div，则可以使用“value”。

​

$(function(){
  // this binds the click event to all divs of class .sm-envies
  // no need to do an each thanks to jquery
  $('.sm-envies').on('click', function(){
    var envie = $(this).data('value');
    $(".whichenvie > input").val(envie);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-6 sm-6">
  <div class="decale sm-envies envie" data-value="Expo">
    <p>Expo</p>
  </div>
</div>
<div class="col-xs-6 sm-6">
  <div class="decale sm-envies envie" data-value="Extrême">
    <p>Extrême</p>
  </div>
</div>
<div class="col-xs-6 sm-6">
  <div class="decale sm-envies envie" data-value="Spa">
    <p>Spa</p>
  </div>
</div>
<div class="col-xs-6 sm-6">
  <div class="decale sm-envies envie" data-value="Nature">
    <p>Nature</p>
  </div>
</div>
<div class="col-md-12 whichenvie">
  <input type="text">
</div>

​

Answer 3

这个JS代码应该可以工作：

$('.sm-envies').on('click', function (e){
    $( ".whichenvie>input" ).val($( ".whichenvie>input" ).val() + ', ' + $(e.target).text());
});

请参阅：小提琴