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

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>

当顾客点击鞋码号码时，它应该取size-value-??部分从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
        }
    });
});

(更新演示)

一般注释:
您应该能够通过设置.noConflict()来抑制jQuery对$符号的使用。但是，如果这个库已经存在和，则建议将该功能转换为jQuery。

Answer 3

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