脚本不起作用

时间:2013-12-14 10:55:34

标签: jquery

我无法理解我的脚本出了什么问题,为什么即使第一个alert也不起作用? http://jsfiddle.net/TULsL/17/

HTML:

<div id="listProducts">
    <input type="radio" class="selectItem" name="inch" id="inch-1" value="1" />
    <label for="inch-1">Имя: тостер, Цвет: серый, Тип: мелкая техника, Цена: <span class="priceIn">500</span>, Количество единиц на складе: 5</label>
    <br/>
    <input type="radio" class="selectItem" name="inch" id="inch-2" value="4" />
    <label for="inch-2">Имя: миксер, Цвет: черный, Тип: мелкая техника, Цена: <span class="priceIn">300</span>, Количество единиц на складе: 3</label>
    <br/>
    <input type="radio" class="selectItem" name="inch" id="inch-3" value="5" />
    <label for="inch-3">Имя: электрочайник, Цвет: белый, Тип: мелкая техника, Цена: <span class="priceIn">320</span>, Количество единиц на складе: 2</label>
    <br/>
</div>
<input type="text" id="priceValue" />

JavaScript的:

$(document).ready(function () {
    $('#listProducts input:radio:checked']).click(function () {
        alert('test');
        var text = $(this).next('label').find('.priceIn').html();
        alert(text);
        $('#priceValue').text(text);
    });
});

4 个答案:

答案 0 :(得分:0)

删除]和:选中,文本(文本)应为val(文本)

原件:

$(document).ready(function () {
    $('#listProducts input:radio:checked']).click(function () {
        alert('test');
        var text = $(this).next('label').find('.priceIn').html();
        alert(text);
        $('#priceValue').text(text);
    });
});

正确:

$(document).ready(function () {
    $('#listProducts input:radio').click(function () {
        alert('test');
        var text = $(this).next('label').find('.priceIn').html();
        alert(text);
        $('#priceValue').val(text);
    });
});

答案 1 :(得分:0)

你弄错了两个是']'并检查属性..

$('#listProducts input:radio').click(function () {
            alert('test');
            var text = $(this).next('label').find('.priceIn').html();
            alert(text);
            $('#priceValue').val(text);
        });

答案 2 :(得分:0)

你最后忘了'

 $('#listProducts input:radio:checked]')
                   -------------------^--

也可以使用$('#listProducts input:radio]')代替

$('#listProducts input:radio:checked]')

答案 3 :(得分:0)

$(document).ready(function () {
    // an extra ] at the end of the selector and you were registering the handler to only the checked radio button, in this case when the page loads there are no radio button which is checked
    $('#listProducts input:radio').change(function () {
        alert('test');
        var text = $(this).next('label').find('.priceIn').html();
        alert(text);
        $('#priceValue').text(text);
    });
});

演示:Fiddle

最好使用更改处理程序而不是单击处理程序