如何使用div作为jquery隐藏字段的单选按钮选择器？

Question

我正在尝试使用 jquery 技能创建一个美观的产品订单表单。

我有一些鞋码值，例如 div：

<div id="select-size">
    <div id="size-value-19">39</div>
    <div id="size-value-20">40</div>
    <div id="size-value-21">41</div>
    <input type="hidden" name="option[229]" id="option-size" value="">
</div>

当客户单击鞋码数字时，它应该从 div id 中获取尺码值-?? 部分并将其放入 #option-size 隐藏字段中。 我怎样才能做到这一点？

顺便说一句：我已经找到了一个prototypejs示例来完成这项工作，但是prototype和jquery无法正常协同工作。 让我为您提供原型示例代码：

<script type="text/javascript">
//<![CDATA[
document.observe("dom:loaded", function() {
    function deActivate(elt) {
    elt.removeClassName('active');
    }
    function watchClick(evt) {
    var element = Event.element(evt);
    if (element.hasClassName('outstock')) return;

    $$('#select-size div').each(function(elt) {deActivate(elt)});
    element.addClassName('active');
    var eid = element.id.split('-')[2];
    $('option-size').setValue(eid);
    }
    $$('#select-size div').invoke('observe', 'click', watchClick);
});
//]]>
</script>

我仍然不敢相信 js 框架开发人员如何使用相同的 $ 符号......

Answer 1

$('div').click(function(){

var id = $(this).attr('id');

$('#option-size').val(id);

});

Answer 2

OP 提供的代码，已翻译为 jQuery：(

$(function() { // On DOM ready ...
    var $sizes = $('#select-size div'), // Size elements
        $input = $('#option-size'); // Hidden input

    $sizes.click(function() { // On click on size element ...
        var $this = $(this); // Reference to this element
        if (!$this.hasClass('outstock')) { // If not out of stock ...
            $sizes.removeClass('active'); // Remove .active on all
            $this.addClass('active'); // Add .active on this

            $input.val(this.id.split('-')[2]); // Set value in hidden field
        }
    });
});

更新的演示)

一般说明：
您应该能够通过 禁止 jQuery 使用 $ 符号.noConflict() 设置。然而，如果这个库已经存在并且您对prototypejs没有其他用途，建议将功能转换为jQuery。

Answer 3

添加 jquery

<script type="text/javascript" src="script/jquery-1.5.1.js"></script>

并将此脚本添加到您的页面

<script type="text/javascript">
    $(document).ready(function () {
        $('#size-value-19').click(function () {
            $('#option-size').val($(this).text());
        });
        $('#size-value-20').click(function () {
            $('#option-size').val($(this).text());
        });
        $('#size-value-21').click(function () {
            $('#option-size').val($(this).text());
        });
    });
</script>