JQuery在div中獲取多個值

我需要獲取不同div的值。我有18個選擇。當我選擇一個div時，div的類通過JS代碼變成.sm-select。我可以選擇最多4個div，我想要得到div的值，如：「值1，值4，值6，值12」，並將它們存儲在隱藏的輸入字段中。這些值是文本字符串。JQuery在div中獲取多個值

但是，目前我只有第一個使用「.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); 
     }); 
    }); 
});

來源

2015-07-10 vincent

'$（「whichenvie>輸入」）。VAL（$（本）.VAL（）+ '' + ENVIE）'？也許這個？ –

你只有第一個，因爲jquery類選擇器返回一個數組...我覺得我鍵入它像1000倍xD你需要遍歷你的HTMLCollection，就像你用each（）函數和你一樣需要在你的「value - >'data-value =」yourValue「之前添加數據' – messerbill

在小提琴中複製你的問題，以便我們能夠幫助你。而'div'元素沒有'value '屬性，如果需要的話，使用自定義的'data- *'屬性！ – lshettyl

在jQuery對象上調用attr函數將僅返回選擇器找到的第一個元素的屬性值。要獲得所有元素的屬性值，你將不得不遍歷使用each函數的對象：

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

來源

2015-07-10 14:01:56

在HTML中，除非你用 '數據 - ' 前面加上他們，在這種情況下， '數據值' 您不能創建自定義屬性。如果元素是一個輸入而不是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>

來源

2015-07-10 13:57:21 Juank

這個JS代碼應該工作：

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

參見：jsfiddle

來源

2015-07-10 13:58:03

設置一個計數器來計算，

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++ 
})

來源

2015-07-10 14:00:27 aahhaa

另一種解決方案使用$.map()和join()。這也使您只能選擇4個選項。

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

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

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

來源

2015-07-10 14:20:00 lshettyl

JQuery在div中獲取多個值

回答

相關問題