IE 问题：可见？ [关闭]

Question

谁能告诉我如何在 IE 中进行这项工作？它在所有其他浏览器中都能完美运行！

我假设:visible 是问题所在？

TIA

$('.yes').click(function () {
    $('.question:visible')
        .fadeOut()
        .closest('.question')
        .nextAll('.question')
        .eq(0)
        .delay(400)
        .fadeIn();
});

所有问题都采用以下格式：

<div class="question">
<p>Question 1</p>
<h1>is this a question?</h1>
<label class="btn"><input type="radio" name="question1" value="yes"><span class="yes">YES</span></label>
<label class="btn"><input type="radio" name="question1" value="no"><span class="no">NO</span></label>
<label class="btn"><input type="radio" name="question1" value="maybe"><span class="maybe">MAYBE</span></label>
</div>

问题 >1 如下所示：

<div class="hiddenquestion">
<p>Question 2</p>
<h1>is this a question?</h1>
<label class="btn"><input type="radio" name="question2" value="yes"><span class="yes">YES</span></lable>
<label class="btn"><input type="radio" name="question2" value="no"><span class="no">NO</span></lable>
<label class="btn"><input type="radio" name="question2" value="maybe"><span class="maybe">MAYBE</span></lable>
</div>

.hiddenquestion 当然是 display: none;

Answer 1

好的，这里有几个问题

首先，您的标签标签没有正确关闭，因为有人已经评论了</lable> 应该是</label>。

其次，从您的示例中，您的隐藏问题的类属性设置如下<div class="hiddenquestion">，但我怀疑那里应该有一个空格，这意味着这就是您想要的<div class="hidden question">。你应该有一个 css .hidden { display: none; } 而不是 .hiddenquestion

第三，你需要为单选按钮和标签添加一个点击处理程序（或者这是它似乎在 IE 中工作的唯一方式），在这种情况下你的 js 应该看起来像这样。

var fn = function () {
    $('.question:visible')
        .fadeOut()
        .closest('.question')
        .nextAll('.question')
        .eq(0)
        .delay(400)
        .fadeIn();
};

// click handler on the yes label
$('.yes').click(fn);

// click handler on the actual yes radio
$(':radio[value="yes"]').change(fn);

Answer 2

我认为你的问题是这样的

<label class="btn"><input type="radio" name="question2" value="yes"><span class="yes">YES</span></lable>

请注意<label>、</lable> 的无效结束标记。这会使标记在 IE 中无效。

更新：

在 IE9/8 中测试过，效果很好

标记

<button class="yes">YESS!</button>
  <div class="question" style="display: block">
     <p>Question 1</p>
     <h1>is this a question?</h1>
     <label class="btn">
        <input type="radio" name="question1" value="yes" />
        <span class="yes">YES</span>
     </label> <label class="btn">
        <input type="radio" name="question1" value="no">
        <span class="no">NO</span></label> <label class="btn">
        <input type="radio" name="question1" value="maybe">
        <span class="maybe">MAYBE</span></label>
  </div>
<div class="question">
     <p>Question 2</p>
     <h1>is this a question?</h1>
     <label class="btn">
        <input type="radio" name="question1" value="yes" />
        <span class="yes">YES</span>
     </label> <label class="btn">
        <input type="radio" name="question1" value="no">
        <span class="no">NO</span></label> <label class="btn">
        <input type="radio" name="question1" value="maybe">
        <span class="maybe">MAYBE</span></label>
  </div>
<div class="question">
     <p>Question 3</p>
     <h1>is this a question?</h1>
     <label class="btn">
        <input type="radio" name="question1" value="yes" />
        <span class="yes">YES</span>
     </label> <label class="btn">
        <input type="radio" name="question1" value="no">
        <span class="no">NO</span></label> <label class="btn">
        <input type="radio" name="question1" value="maybe">
        <span class="maybe">MAYBE</span></label>
  </div>

CSS

.question{display: none;}

更新

为了使其在单击单选按钮或所有浏览器中的标签文本时工作，您必须将您的 javascript 更改为

//change the selector of .yes to
$('label.yes').click(function () {...

并将问题的“是”部分的标记更改为

<label class="btn yes">
    <input type="radio" name="question1" value="yes" />
    <span>YES</span>
</label>