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>

问题＆gt; 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当然是显示：无;

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 () {...

并更改＆＃34;是＆＃34;的标记

的问题部分

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

IE问题：可见吗？

2 个答案:

更新

标记

CSS

更新