单击元素以删除其他元素类

Question

我正在创建一个网站，我想制定一条规则，如果点击了"all" div，则"display: none" <div>将会删除'none'类。我的代码无效，我不明白为什么。

我已经尝试了所有我知道的东西，在网上搜索这个问题的答案，我无法找到任何可以帮助我解决这种特殊情况的事情。

＆＃13;

＆＃13;

var check1;
var check2;

$("#btn-1").click(function() {
  check1 = 1;
});

$("#btn-2").click(function() {
  check2 = 1;
});

if (check1 == 1 && check2 == 1) {
  $("#btn-3").removeClass("none");
}

＆＃13;

div {
  position: fixed;
  padding: 20px;
  background-color: lightblue;
  width: 150px;
}

#btn-1 {
  bottom: 0;
}

#btn-2 {
  bottom: 0;
  left: 250px;
}

#btn-3 {
  top: 0;
}

.none {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="btn-1">

</div>

<div id="btn-2">

</div>

<div id="btn-3" class="none">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加你的if in event：

var check1;
var check2;

$("#btn-1").click(function() {
  check1 = 1;
  if (check1 == 1 && check2 == 1) {
    $("#btn-3").removeClass("none");
  }
});

$("#btn-2").click(function() {
  check2 = 1;
  if (check1 == 1 && check2 == 1) {
     $("#btn-3").removeClass("none");
  }
});

Answer 2

单击按钮时，您必须检查是否全部被点击...

var description = Xrm.Page.getAttribute('new_street').getValue(); 
// Get the HTML iFrame object. 
var iFrame = Xrm.Page.ui.controls.get('WebResource_Map').getObject(); 
// Get the element from the iFrame. 
var element = iFrame.contentWindow.document.getElementById('addr_line1'); 
var ifr = iFrame.contentWindow; 
// Set the element's value. 
element.value = description+' ';

Answer 3

创建一个像

这样的函数

var check1;
var check2;

$("#btn-1").click(function() {
  check1 = 1;
  checkHide()
});

$("#btn-2").click(function() {
  check2 = 1;
  checkHide()
});

function checkHide(){
if (check1 == 1 && check2 == 1) {
  $("#btn-3").removeClass("none");
}
}

div {
  position: fixed;
  padding: 20px;
  background-color: lightblue;
  width: 150px;
}

#btn-1 {
  bottom: 0;
}

#btn-2 {
  bottom: 0;
  left: 250px;
}

#btn-3 {
  top: 0;
}

.none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="btn-1">

</div>

<div id="btn-2">

</div>

<div id="btn-3" class="none">

</div>

Answer 4

您放置在点击之外的if条件甚至需要插入这两个点击事件中。

请查看解决方案的snippit。

最诚挚的问候和快乐的编码;）

var check1;
var check2;

$("#btn-1").click(function() {
  check1 = 1;
  if (check1 == 1 && check2 == 1) {
  $("#btn-3").removeClass("none");
}
});

$("#btn-2").click(function() {
  check2 = 1;
  if (check1 == 1 && check2 == 1) {
  $("#btn-3").removeClass("none");
}
});

div {
  position: fixed;
  padding: 20px;
  background-color: lightblue;
  width: 150px;
}

#btn-1 {
  bottom: 0;
}

#btn-2 {
  bottom: 0;
  left: 250px;
}

#btn-3 {
  top: 0;
}

.none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="btn-1">

</div>

<div id="btn-2">

</div>

<div id="btn-3" class="none">

</div>

Answer 5

让我们看看你的代码到底在做什么：

var check1;
var check2;

$("#btn-1").click(function() { // <-- this function is run after a click
  check1 = 1;
});

$("#btn-2").click(function() { // <-- this function is run after a click
  check2 = 1;
});

// <-- there are no clicks yet, so none of the above functions are run yet
// both click1 and click2 are undefined.

if (check1 == 1 && check2 == 1) {
  // This does not run, because both click1 and click2 are undefined at this point
  $("#btn-3").removeClass("none");
}

要解决此问题，您必须确保在点击发生后完成检查。所以：

var check1;
var check2;

$("#btn-1").click(function() {
  check1 = 1;
  checkClicks();
});

$("#btn-2").click(function() {
  check2 = 1;
  checkClicks();
});

function checkClicks() {
  if (check1 == 1 && check2 == 1) {
    $("#btn-3").removeClass("none");
  }
}

Answer 6

click事件的代码块中的条件语句，否则当满足条件时，if语句将不会触发true

var check1;
var check2;

$("#btn-1").click(function() {
  check1 = 1;
  console.log(check1);

  if (check1 && check2) {
    $("#btn-3").removeClass("none");
  }
});

$("#btn-2").click(function() {
  check2 = 1;
  console.log(check2);

  if (check1 && check2) {
    $("#btn-3").removeClass("none");
  }
});

div {
  position: fixed;
  padding: 20px;
  background-color: lightblue;
  width: 150px;
}

#btn-1 {
  bottom: 0;
}

#btn-2 {
  bottom: 0;
  left: 250px;
}

#btn-3 {
  top: 0;
}

.none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="btn-1">

</div>

<div id="btn-2">

</div>

<div id="btn-3" class="none">

</div>