麻烦多参数if语句

Question

我有一些基本的HTML和JavaScript，允许用户点击每个适用于他们的问题的四个图像的一个图像（调查）。然后，基于用户点击的两个图像，将生成链接以将它们路由到另一页面。我决定实现此功能的最简单方法是通过一系列“if-statements”并使点击的图像ids'为'。

但我的问题是：我可以让每个人都使用虚假陈述，但合并后的陈述不会触发警告。

我的HTML：

<div id="page3">
<h1 align="right">generally i feel</h1>
   <img src="../Images/tile1.png" id="tile1" value="1"/>
   <img src="../Images/tile2.png" id="tile2" value="2"/>
   <img src="../Images/tile3.png" id="tile3" value="3"/>
   <img src="../Images/tile4.png" id="tile4" value="4"/>
</div>

<div id="page4">

<h1 align="right">i see</h1>
   <img src="../Images/ink.png" id="ink">
   <div id="pg4ans">
       <img src="../Images/tile5.png" id="tile5" class="tile2">
       <img src="../Images/tile6.png" id="tile6" class="tile2">
       <img src="../Images/tile7.png" id="tile7" class="tile2">
       <img src="../Images/tile8.png" id="tile8" class="tile2">
   </div>

</div>

我的剧本：

var dest1 = document.getElementById("tile1");
var dest5 = document.getElementById("tile5");

$('#tile1').click(function(){
    dest1 = false;
});

$('#tile5').click(function(){
    dest5 = false;
});

if(dest1 = false, dest5 = false){
    alert("link will replace this alert");  

}

当然，如果有一种更简单的方法来实现这种效果，那也会很棒。

Answer 1

你需要考虑范围。你的陈述

if(dest1 = false, dest5 = false){
    alert("link will replace this alert");  
}

正在执行 ，而不是在您的点击功能执行后。

尝试使用元素包装要监视的<img>，并为该元素指定一个类，如下所示：

<div class="checkThese">
    <img src="../Images/tile5.png" id="tile5" class="tile2">
    <img src="../Images/tile6.png" id="tile6" class="tile2">
    <img src="../Images/tile7.png" id="tile7" class="tile2">
    <img src="../Images/tile8.png" id="tile8" class="tile2">
</div>

十个将处理程序附加到该div，如下所示：

var clicked = [];

$('div.checkThese').on('click', function (e) {
    var thisImage = e.target.id;

    if (clicked.indexOf(thisImage) < 0) {
        clicked.push(thisImage);
    }

    check();
});

function check () {
    // This will run every time an image is clicked, and 
    // "clicked" contains the ids of all the images that
    // have been clicked
}

这称为Event Delegation。

Answer 2

更正if声明

您的if声明将始终评估为false。这是因为它是一个复合赋值语句（使用赋值运算符=），赋值语句的值是最右边的值（{{1} }）。此外，此赋值语句正在更改false和dest1的值，将两者都设置为false。

您想使用比较语句。这需要使用比较运算符dest2（或==）来检查两个值是否相等。您可以通过使用布尔AND运算符===组合两个比较来使其成为复合语句。

您的完整&&条件如下所示：if

更正执行顺序

即使在更正if(dest1 == false && dest5 == false)语句后，它也会始终返回if。这是因为您在开头的代码将两个变量设置为DOM元素：

false

之后，您立即设置了点击处理程序：

var dest1 = document.getElementById("tile1");
var dest5 = document.getElementById("tile5");

但是，内部功能不运行。它们只是设置为在单击元素时运行。然后立即执行$('#tile1').click(function(){ dest1 = false; }); $('#tile5').click(function(){ dest5 = false; }); 语句，因为if和dest1设置为tile DOM元素，它们不等于dest2，因此if语句将返回false

单击其中一个切片将更改false或dest1的值，但不会导致dest2语句再次执行。您永远不会收到当前代码的警报。

您需要从每个点击处理程序调用{​​{1}}语句，因此，我建议将其包装在命名的if中，以便可以调用它并且不会重复8次过度。假设每个组合都有一个唯一的链接，if - function链条将长达16个条件。你绝对不想复制它。而是做类似以下的事情（这也将允许用户以任何顺序回答）：

＆＃13;

＆＃13;

if

＆＃13;

else if

＆＃13;

var dest1 = document.getElementById("tile1");
var dest5 = document.getElementById("tile5");

$('#tile1').click(function(){
    dest1 = false;
    check();
});

$('#tile5').click(function(){
    dest5 = false;
    check();
});

function check() {
    if(dest1 == false && dest5 == false){
        alert("link will replace this alert");  
    }
}

＆＃13;

＆＃13;

＆＃13;

一旦这样做了，我强烈建议您将完整代码（所有图块都正常工作）发布到Code Review，因为我看到了一些可以在这个问题的范围。

Answer 3

你可以试试这个：

var dest1 = true;
var dest5 = true;

$('#tile1').click(function(){
    dest1 = false;
    if(dest1 == false && dest5 == false){
        alert("link will replace this alert");  
    }
});

$('#tile5').click(function(){
    dest5 = false;
    if(dest1 == false && dest5 == false){
        alert("link will replace this alert");  
    }
});

Demo

Answer 4

尝试在组合的if语句中使用两个=。您现在使用的单个=分配false，而不是检查false。

var dest1 = false;
var dest5 = false;
if(dest1 == false && dest5 == false)
{
    alert("link will replace this alert");  
}

Answer 5

你这里有很多问题。

在javascript中，使用==和===（严格等于）进行比较。

=分配一个值。

在此示例中：

if(dest1 = false, dest5 = false){
    alert("link will replace this alert");  
}   

你实际上在做：

if(false, false){
    alert("link will replace this alert");  
}

但更好的方法是这样的

＆＃13;

＆＃13;

$('.page').on('click', 'img', function(){ 
  $(this).toggleClass('selected');
});

$('.page').on('click', '.done', function(){ 
   var $selected = $(this).parents('.page').find('img.selected');
   var values = $.map($selected, function(el){
     return $(el).attr('value');
   });
   $("#result").text(values.join(', '));
});

＆＃13;

img.selected {
  border: 3px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page3" class="page">
   <h1>generally i feel</h1>     
   <a href="#"><img src="http://placehold.it/100x100" id="tile1" value="1"/></a>
   <img src="http://placehold.it/100x100" id="tile2" value="2"/>
   <img src="http://placehold.it/100x100" id="tile3" value="3"/>
   <img src="http://placehold.it/100x100" id="tile4" value="4"/>
     
   <button class="done">All done!</button>
</div>

<textarea id="result"></textarea>

＆＃13;

＆＃13;

＆＃13;