javascript - 自定义属性而不是 val()

Question

我从不需要 jQuery 来获得比我在网上找到的更多的东西。我正在尝试从选择/选项中对自定义 html 属性进行“实时”计数。

我使用了这个运行良好的脚本，但不幸的是我需要来自 value 的数据将其发送到 PHP，并且需要使用自定义 data- 属性。我不知道如何访问选项而不是 val() - 我尝试了 $ksm、$data('ksm') 和其他一些奇怪的想法，但它不起作用。

JS：

<script type='text/javascript'>
  //<![CDATA[
   $(window).load(function(){
    $("[id$=nr]").change(function() {
        var total = 0;     
        $('.zawodnik select').each(function() {
            total = total + Number( $(this).val() );
        });
        $('div#sumaksm').html(total); 
    });
   });
  //]]>
</script>

HTML（zaw1 到 zaw7 完全相同）：

<tr><td class="zawodnik">
<select name="zaw3" id="3nr">
      <option value="1" class="rider" data-ksm="10.40">Nicki Pedersen (10.40)</option>
      <option value="2" class="rider" data-ksm="9.58">Niels Kristian Iversen (9.58)</option>
      <option value="3" class="rider" data-ksm="9.28">Chris Holder (9.28)</option>
      <option value="4" class="rider" data-ksm="9.27">Greg Hancock (9.27)</option>
</select>
</td></tr>
Your KSM: <div id="sumaksm">-select riders-</div>

我很抱歉我的英语不好:)

Answer 1

你可以使用'.attr()'

$(this).attr('data-ksm')

Answer 2

我建议：

$('select').change(function(){
    var self = $(this);
    $('#sumaksm').text(self.find('option:selected').data('ksm'));
});

JS 小提琴演示。

虽然如果你真的（出于某种原因）想要在data-ksm每次select更改时对属性求和：

$('select').change(function(){
    var self = $(this),
        total = 0;
    self.find('option').each(function(){
        total += parseFloat($(this).data('ksm'));
    });
    $('#sumaksm').text(total);
});

JS 小提琴演示。

按照 Gaby 的提示（在下面的评论中），我建议：

$('[id$=nr]').change(function(){
    var total = 0;
    $('[id$=nr]').each(function(){
        total += parseFloat($(this).find('option:selected').data('ksm'));
    });
    $('#sumaksm').text(total);
});

JS 小提琴演示。

参考：

• change().
• data().
• find().
• text().

Answer 3

使用.data()方法

   $(window).load(function(){
    $("[id$=nr]").change(function() {
        var total = 0;     
        $('.zawodnik select').each(function() {
            var option = this.options[ this.selectedIndex ];
            total = total + parseFloat( $(option).data('ksm') );
        });
        $('div#sumaksm').html(total); 
    });
   });

演示在http://jsfiddle.net/gaby/bxuCw/2/