首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >与jquery的号码匹配游戏。第二个选择会影响到前面的选择。

与jquery的号码匹配游戏。第二个选择会影响到前面的选择。
EN

Stack Overflow用户
提问于 2020-11-12 16:48:39
回答 1查看 43关注 0票数 0

这是jquery代码。在第一选择变成绿色后,第二选择将第一选择的li呈现为红色。

代码语言:javascript
复制
$(“#list1).on(“click”,”li”, function(){
var nomber = $(this);
$(“#list2”).on(“click”,”li”, function(){
var nombre = $(this);
if(nombre.text() === nomber.text()){
nomber.css(“color”, “green”);
nombre.css(“color”, “green”);
}else{
nomber.css(“color”, “red”);
nombre.css(“color”, “red”);
}
}

这是html代码

代码语言:javascript
复制
<ul id = “list1”>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

<ul id = “list2”>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-12 21:36:38

您需要让脚本记住第一个和第二个选择,相互独立。您可以在彼此内部嵌套单击事件侦听器,但这不是一个好的编码实践。在你的第一个和第二个数字被选中后,它们是错误的,你需要忘记这些数字。然后,如果您的数字匹配,您还可以将另一个列表上的数字也转成绿色。

见下面的例子。这样您就可以先从list1或list2中选择一个数字。

代码语言:javascript
复制
// global variable; where the first selected number will be saved
window.first_selected_number = null;
// create a click listener on all <li> on list1
$('#list1 li').click(function() {
  // this will remember the first number selected
  window.first_selected_number = $(this).text();
  // if the first and second number match exactly
  if (window.first_selected_number === window.second_selected_number) {
    // set text color of this <li> to green
    $(this).css('color', 'green');
    // loops through second list to find the matching number
    // if numbers match, sets the <li> text color of the second list to green
    $('#list2 li').each(function() {
      var is_matching_number = $(this).text() === window.first_selected_number;
      if (is_matching_number) {$(this).css('color', 'green');}
    });
    // forgets the first and second numbers
    window.first_selected_number = null;
    window.second_selected_number = null;
  }
  // if the first and second number were set but did not match
  else if (window.first_selected_number && window.second_selected_number) {
    // set text color of this <li> to red
    $(this).css('color', 'red');
    // forgets the first and second numbers
    window.first_selected_number = null;
    window.second_selected_number = null;
  }
  // if either the first or second number was not set
  else {
    // reverts the color back to what it was before it was changed
    $(this).css('color', 'initial');
  }
});


// this is same logic as the first list, but with the second number as the main focus
window.second_selected_number = null;
$('#list2 li').click(function() {
  window.second_selected_number = $(this).text();
  if (window.first_selected_number === window.second_selected_number) {
    console.log($(this));
    $(this).css('color', 'green');
    $('#list1 li').each(function() {
      var is_matching_number = $(this).text() === window.second_selected_number;
      if (is_matching_number) {$(this).css('color', 'green');}
    });
    window.first_selected_number = null;
    window.second_selected_number = null;
  }
  else if (window.first_selected_number && window.second_selected_number) {
    $(this).css('color', 'red');
    window.first_selected_number = null;
    window.second_selected_number = null;
  }
  else {
    $(this).css('color', 'initial');
  }
});

下面是一个有用的示例:https://jsfiddle.net/c8pryd59/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64808143

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档