Question

我有一个带有多个输入/单选按钮的表单。

我还有一系列的Yes＆amp;没有单选按钮。选中“是”单选按钮后，我将向下滑动一些数据。

HTML：

        <div class="item seperator first clearfix">
            <label>test</label>
            <div class="radioWrap">
                <label class="yes">
                <input class="homepageContent" name="homepageContent" type="radio" value="yes" />
                </label>
                <label class="no">
                <input class="homepageContent" name="homepageContent" type="radio" value="no" checked />
                </label>
            </div>
        </div>
        <div class="extrasInner">
            <div class="item clearfix">
                <label for="theContent">Your Content:</label>
                <textarea id="theContent" name="theContent"></textarea>
            </div>  
        </div>  
        <div class="extrasOuter hide clearfix">         
            <a href="#" class="makeChanges">Make Changes</a>
            <span>Click "Make Changes" to update.</span>
        </div>

jQuery：

$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
    var value = $(this).val();
    if (value == 'yes') {
        $(this).parent().parent().parent().next().slideDown();          
        $(this).parent().parent().parent().next().next().slideDown();
    } else {
        $(this).parent().parent().parent().next().slideUp();
        $(this).parent().parent().parent().next().next().slideUp();
    }
});

问题1）这在谷歌浏览器中运行得非常好，但在Firefox和IE中却不行。它似乎无法识别点击功能？

已解决：我的一个文件中有一个函数可以从焦点上的输入字段中删除值，这也是在IE / Firefox中剥离单选按钮的值（但不是chrome ！）。

问题2）我的DOM遍历slideUp / slideDown是否可以接受实现我想要做的事情？我是怎么做的，有什么不利之处，可以改进吗？

Answer 1

回答＃1

正如Anthony Grist指出的那样，doesn't seem是点击功能的问题。

回答＃2

您的DOM遍历似乎有点不必要。实际上，您的DOM结构需要重新排列。

使用复选框代替单选按钮。复选框只接受两个值：true或false，或者在您的情况下，是或否。这似乎更合适。
在item div中封装你的额外内部和额外外部div，而不是在复选框旁边。这样，您可以更轻松地遍历项目。

此外，您应该阅读不同类型的traverse functions JQuery has：

了解所有这些遍历函数，您很可能再也不会parent().parent().parent()...。：）

这是一个JSFiddle example |代码

HTML

<ul>
    <li class='item'>
        <label>
            <input class="homepageContent" name="homepageContent" type="checkbox" value="yes" />
            Item 1
        </label>
        <div class='extras'>
            <div class='inner'>
                <label>
                    Your Content:<textarea name="content"></textarea>
                </label>
            </div>
            <div class='outer'>
                <a href="#" class="makeChanges">Make Changes</a>
                <span>Click "Make Changes" to update.</span>
            </div>
        </div>
    </li>
</ul>

的Javascript

$("input:checkbox").click(function() {
    var $this = $(this),
        $item = $(this).closest(".item");

    if($this.is(':checked')){
        $(".extras", $item).slideDown();
    }else{
        $(".extras", $item).slideUp();
    }
});

CSS

.extras{
    display: none;
}

Answer 2

单选按钮的值始终相同，无论是否选中。如果您想知道是否选中了特定的单选按钮，请使用此代码。根据单选按钮的状态做你的东西。

var value = $(this).attr('checked')

Answer 3

这对我在FF（jsfiddle）中起作用，虽然DOM看起来有些复杂（我猜是因为它缺少了很多其他的CSS /资源）。

我认为你可以简化jQuery选择器很多。通常，使用简单的ID或类选择器将使您的页面更高效（更简单！）

$('.homepageContent').click(function() {
    var value = $(this).val();
    if (value == 'yes') {
        $('.extrasInner').slideDown();          
        $('.extrasOuter').slideDown();
    } else {
        $('.extrasInner').slideUp();
        $('.extrasOuter').slideUp();
    }
});

希望做这样的事情能让它更好地跨浏览器工作。

Answer 4

试试这种方式

$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
    var value = $(this).val();
    if (value == 'yes') {
        $(this).parents('.seperator').next().slideDown();          
        $(this).parents('.seperator').next().next().slideDown();
    } else {
        $(this).parents('.seperator').next().slideUp();
        $(this).parents('.seperator').next().next().slideUp();
    }
});

修改

还有一点

将您的代码包装在
中
$(document).ready(function(){});
像这样

$(document).ready(function(){ $("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() { var value = $(this).val(); if (value == 'yes') { $(this).parents('.seperator').next().slideDown(); $(this).parents('.seperator').next().next().slideDown(); } else { $(this).parents('.seperator').next().slideUp(); $(this).parents('.seperator').next().next().slideUp(); } }); });

输入：IE / Firefox中没有触发无线电点击功能

4 个答案:

回答＃1

回答＃2