-1

Can anyone tell me how to make this work in IE? It works perfectly in every other browser!

I'm assuming the :visible is the problem?

TIA

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

All questions are in this format:

<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>

Question >1 looks like this:

<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>

where .hiddenquestion is of-course display: none;

4

2 回答 2

2

好的，这里有几个问题

首先，您的标签标签没有正确关闭，因为有人已经评论过</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);
于 2013-04-28T20:44:19.540 回答
1

我认为你的问题是这个 

<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>
于 2013-04-28T20:30:47.450 回答