Jquery點擊事件，如果語句

我添加瑣事作爲主要組件到我的網頁。我試圖在正確的時候選擇「正確」，而錯誤時選擇「錯誤」。我不知道我在做什麼。大聲笑。任何幫助將不勝感激。Jquery點擊事件，如果語句

<ul> 
     <li id="a">A) Lucy</li> 
     <li id="b">B) Bonnie</li> 
     <li id="c">C) Sheila</li> 
     <li id="d">D) Kai</li> 
    </ul>

JQuery的

我試圖做出正確的一個變量jQuery的

var right = $("ul li#a").on(click, function() {}); 

if (click === right){ 
    $("ul li#a").addClass("correct"); 
} else { 
    $("li").addClass("wrong"); 
}

來源

2017-03-04 willed89

JavaScript是錯在幾個方面：'李＃了'是無效的，' .on（click'應該是'.on（'click''，你將一個空函數傳遞給一個點擊處理函數，你的'right'變量是'.on（）'的返回值...我已經給你一個你想做的代碼的答案，但我強烈建議你在發佈更多的問題之前花一些時間用jQuery教程。 – AmericanUmlaut

我同意100％。我以爲我已經準備好，直到我開始自己的項目。我今天開始一個教程。 – willed89

如果我理解你的最終目標，你想要做的事，以表明答案是「正確」的答案或沒有，那麼你要如果他們得到「正確」答案，則分配類別.correct或.wrong。

我將data-right="right"分配給「正確」的答案。然後，當有人點擊li時，請查找該屬性，如果他們選擇了「正確」答案，則分配.correct，如果不是，則分配.wrong。

$('li').on('click',function() { 
 
    var right = $(this).data('right'); 
 
    $(this).siblings().removeClass('correct wrong'); 
 
    if (right == "right") { 
 
    $(this).addClass('correct'); 
 
    } else { 
 
    $(this).addClass('wrong'); 
 
    } 
 
})

.correct { 
 
    color: green; 
 
} 
 
.correct:after { 
 
    content: '\2713'; 
 
} 
 
.wrong { 
 
    color: red; 
 
} 
 
.wrong:after { 
 
    content: '\2613'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="a" data-right="right">A) Lucy</li> 
 
    <li id="b">B) Bonnie</li> 
 
    <li id="c">C) Sheila</li> 
 
    <li id="d">D) Kai</li> 
 
</ul>

來源

2017-03-04 01:09:32

非常感謝！ – willed89

@ willed89沒有汗！ –

該解決方案依賴於做出正確的回答了一個名爲「correctAnswer」類，然後綁定一個click事件處理程序，它根據是否具有該類來設置點擊的類別li。我想，做你在找什麼：

<ul> 
    <li id="a" class="correctAnswer">A) Lucy</li> 
    <li id="b">B) Bonnie</li> 
    <li id="c">C) Sheila</li> 
    <li id="d">D) Kai</li> 
</ul> 

$('li').on('click', function() { 
    var classToAdd = $(this).is('.correctAnswer') ? 'correct' : 'wrong'; 
    $(this).addClass(classToAdd); 
});

來源

2017-03-04 01:05:55 AmericanUmlaut

下面是一個完整的例子：


 
    $(document).ready(function() { 
 

 
     var correctAnser = 'a'; // you need to set this to what you need the answer to be 
 
\t  $('ul li').on('click', function() { 
 
      $('ul li').removeClass('correct').removeClass('wrong'); // remove both classes on list elements 
 
      var classToAdd = $(this).attr('id') == correctAnser ? 'correct' : 'wrong'; 
 
      $(this).addClass(classToAdd); 
 
\t  }); 
 
    });

.correct { 
 
     background:#2bb539; 
 
     color:#ffffff; 
 
    } 
 
    .wrong { 
 
     background:#c00; 
 
     color:#ffffff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
     <li id="a">A) Lucy</li> 
 
     <li id="b">B) Bonnie</li> 
 
     <li id="c">C) Sheila</li> 
 
     <li id="d">D) Kai</li> 
 
    </ul>

來源

2017-03-04 01:22:11 Yolo

Jquery點擊事件，如果語句

回答

相關問題