代码之家 › 专栏 › 技术社区 › Some Random Awesome Guy

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

if-statement jquery javascript

Some Random Awesome Guy · 技术社区 · 7 年前

我的代码应该隐藏加载中的几个div,但由于某种原因,当我输入应该显示div的代码时,什么都没有发生。请告诉我为什么我的代码中的jQuery不能与我的 if 声明。

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>

2 回复 | 直到 7 年前

Death-is-the-real-truth 7 年前

注意:-在您的代码中,您试图比较对象( code

所以

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

需要:-

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

$(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
      
    }
  });
});

<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>

有利条件 它可以很好地工作 (只需确保每个分区的id必须是唯一的)

dangmh 7 年前

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

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

<input id="code"> else 陈述

设置一个值

document.alert javascript没有此功能 alert

您也可以使用 switch 声明式

function checkcode(){
    switch (code)
    {
        case "superfoods":
            $("#superfoods").show();
            break;
        case "fakemedia":
            $("#fakemedia").show();
            break;
        case "dropbear":
            $("#dropbear").show();
            break;
        default:
            alert( code + "is not a valid imput.");
    }
}