Question

我的代码应该在加载时隐藏几个div但是由于某种原因，当我输入应该调出div的代码时，没有任何事情发生。请告诉我为什么我的代码中的jQuery不适用于我的if语句。

这里是java-script / jQuery和HTML（以防万一）

var code = $("#code");

function onstart(){
  $("#superfoods").hide();
  $("#fakemedia").hide();
  $("#dropbear").hide();
}

function checkcode(){
  if (code == "superfoods")
  { 
    $("#superfoods").show();
  }
  else if (code == "fakemedia")
  {
    $("#fakemedia").show();
  }
  else if (code == "dropbear")
  {
    $("#dropbear").show();
  }
  else {
    document.alert( code + "is not a valid imput.")
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="onstart()">
    <input id="code"><button onclick="checkcode()">search for level</button>
    <div id="superfoods">
        <a href="superfoods.html"><img src="super-food-400x400.jpg"></a>
    </div>
    <div id="fakemedia">
        <a href="fakemedia.html"><img src="fakemedia.png"></a>
    </div>
    <div id="dropbear">
        <a href="dropbear.html"><img src="drop-bearfgh.jpg"></a>
    </div>
</body>

Answer 1

注意： - 在您的代码中，您尝试将对象（code）与字符串值进行比较，因此您的代码无法正常工作。

所以

var code = $("#code");// this is an object

需要： -

var code = $("#code").val();// this is a string now

但是由于你使用的是jQuery，这个解决方案怎么样： -

＆＃13;

$(document).ready(function(){
  
  $("div").hide();// hide all divs
 
  var ids=[];//create an id's array
  
  $('div').each(function(){
    ids.push($(this).attr('id')); // get all div id's and push them to array
  });
  
  ids = ids.filter(Boolean); // remove empty+undefined values from array
  
  $('button').on('click',function(){//on click of button
  
    var code = $('#code').val();// get text-box value
    
    if ($.inArray( code, ids )>-1){ // if text-box value exist in array
    
      $("#"+code).show(); // show corresponding div
      
    }else {
    
      alert( code + "is not a valid imput."); // else alert
      
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <input id="code"><button>search for level</button><br/><br/>
    <div id="superfoods">
        <a href="superfoods.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrfTcZ0t3zjzHrGzCiaoI9X94WB-fjDesGNNgjPI4W9bZZFHVf"></a>
    </div>
    <div id="fakemedia">
        <a href="fakemedia.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-nmxPn405_hKrvlT8tOghIpl8yQcMMJnuSYuExWgBW4N6TmUn"></a>
    </div>
    <div id="dropbear">
        <a href="dropbear.html"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGqGpDhUX8weC_xIjO_COdt4F03dA58e5feBQw48VuZ6diJQXj"></a>
    </div>
</body>

＆＃13;

注意： - 此代码具有优势，它可以正常使用 增加div的数量 。（只需确保每个div的id必须是唯一的

）

Answer 2

var code = $("#code"); 此语句返回的元素不是字符串

使用var code = $("#code").val();返回字符串

<input id="code">将一直运行else声明

将其设为值

document.alert javascript没有这个功能仅使用alert

您也可以使用{/ 1}}语句

switch

为什么jquery和if语句不能一起工作？

2 个答案: