javascript - 输入 :radio click function isn't triggering in IE/Firefox

Question

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

我还有一系列是和否单选按钮。选中"is"单选按钮后，我会在下面滑下一些数据。

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) 这在 Google Chrome 中绝对没问题，但在 Firefox 和 IE 中却不行。好像不识别点击功能？

已解决:我的一个文件中有一个函数可以删除焦点输入字段中的值，这会在 IE/Firefox(但不是 chrome)中删除单选按钮的值!)。

问题 2) 我的 DOM 遍历 slideUp/slideDown 是实现我想要做的事情的可接受方式吗？我这样做有什么缺点吗？可以改进吗？

Answer 1

#1 的答案

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

#2 的答案

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

• 使用复选框代替单选按钮。复选框只接受两个值:真或假，或者在您的情况下，是或否。好像比较合适。
• 将您的 extras inner 和 extras outer div 封装在您的 item div 中，而不是将其放在复选框旁边。这样，您可以更轻松地在项目内遍历。

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

• > .parent()/.parents()
• > .children()
• > .closest()
• > .next()
• > .prev()
• > .siblings()
• > .find()
• 还有很多。

了解所有这些遍历函数后，您很可能再也不会执行 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;
}