Question

我需要获得不同div的值。我有18个选择。当我选择div时，div的类通过JS代码变为.sm-select。我可以选择最多4个div，我想得到div的值，如：＆＃34;值1，值4，值6，值12和＃34;，并将它们存储在隐藏的输入字段中。值是文本字符串。

然而，目前我只使用第一个＆＃34; .attr（＆＃39; value＆＃39;）＆＃34;使用我的代码，我将其显示在输入类型文本中以进行测试。

有人可以告诉我如何做到这一点吗？谢谢。

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

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

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

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

请参阅：jsfiddle

Answer 3

将计数器设置为count，

var counter = 0; 
var maxCount = 4; 
var answer = array(); 

$('.example').on('click', function() {
     if(counter<maxCount) {
     var thisVal = $(this).val(); 
     answer.push(thisVal); output answer as array
     } else {
          $('input').val(''); // set all value to empty 
          answer = []; // empty array
          counter = 0; // reset counter 
     }
     counter++
})

Answer 4

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

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

Answer 5

使用$.map()和join()的另一种解决方案。这也允许您只选择4个选项。

＆＃13;

$(".col-xs-6").on("click", ".sm-envies", function() {
    
    if ($(".sm-select").length >= 4 ) {
        alert ("you've already selected 4 options!\nThey are " + $("input:text").val());
        return;
    }
    $(this).addClass("sm-select");
    var vals = $(".sm-select").map(function(val) {
        return $(this).data("value");
    }).get().join(",");
    
    $("input:text").val(vals);
});

＆＃13;

.sm-select {
    border: 1px solid green;
    margin-bottom: 5px;
}

＆＃13;

<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="added1">
        <p>added1</p>
    </div>
</div>
<div class="col-xs-6 sm-6">
    <div class="decale sm-envies envie" data-value="added2">
        <p>added2</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" style="width: 300px" />
</div>

＆＃13;

JQuery在div中获取多个值

5 个答案: