Question

我想隐藏一个div，具体取决于对我的服务器的ajax调用的响应结果。我的服务器正在使用对象{available: yes/no}进行响应，具体取决于搜索的域和用户名。如果响应yes我想在我的html的可用列上维护div并隐藏不可用列上的相应div，如果响应是no，则隐藏可用列上的div并维护div在可用列上可见。我的问题是将每个响应附加到相应的div。我怎么能这样做？

HTML：

  <div id="searchresults">
                <div id="available">
                <h4><span class="username"></span><span class="positive-result">is available</span> as a username on:</h4>
                    <div class="facebook"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="https://www.facebook.com/"><i class="fa fa-facebook-square"></i>Facebook</a>
                    </div>
                    <div class="pinterest"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="https://www.pinterest.com/join/"><i class="fa fa-pinterest"></i>Pinterest</a>
                    </div>
                    <div class="twitter"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="https://twitter.com/signup"><i class="fa fa-twitter"></i>Twitter</a>
                    </div>
                    <div class="instagram"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="http://instagram.com/"><i class="fa fa-instagram"></i>Instagram</a>
                    </div>
                    <div class="github"> <!--Class to hide and show this div can be toggled with jQuery -->
                        <a href="https://github.com/join"><i class="fa fa-github"></i>GitHub</a>
                    </div>

                </div> <!--End of #available-->

                <div id="unavailable">
                    <h4><span class="username"></span><span class="negative-result">is not available</span>  as a username on:</h4>
                        <div class="facebook-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="https://www.facebook.com/"><i class="fa fa-facebook-square"></i>Facebook</a>
                        </div>
                        <div class="pinterest-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="https://www.pinterest.com/join/"><i class="fa fa-pinterest"></i>Pinterest</a>
                        </div>
                        <div class="twitter-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="https://twitter.com/signup"><i class="fa fa-twitter"></i>Twitter</a>
                        </div>
                        <div class="instagram-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="http://instagram.com/"><i class="fa fa-instagram"></i>Instagram</a>
                        </div>
                        <div class="github-unavailable"> <!--Class to hide and show this div can be toggled with jQuery -->
                            <a href="https://github.com/join"><i class="fa fa-github"></i>GitHub</a>
                        </div>

                </div> <!--End of #unavailable-->

使用jQuery的Javascript

$(document).ready(function(){
  console.log("Ready!");

  var domains=[ ];
    domains.push($(".facebook").find("a").text());
    domains.push($(".github").find("a").text());
    domains.push($(".twitter").find("a").text());
    domains.push($(".instagram").find("a").text());
    domains.push($(".pinterest").find("a").text());
  // console.log(domains);


  $("#searchbutton").on('click', function(event){

    var username = $("#searchname").val().trim(); // store value from searchbox
    console.log(username);

    if(username === ""){
      event.preventDefault();
    }

    if(username){
      var newhtml = "<p>";
      newhtml += username;
      newhtml += "</p>";
      $(".username").html(newhtml);
      $(".username").remove("newhtml");

      var domainCheck = function(domainName){
        $.ajax({
          url: "/"+username,
          type: "get",
          data: {domainName: domainName, username: username},
          success: function(response){
            console.log(domainName);
            console.log(response.available);

//hide show logic here
                var elem = $("#available").find("div"); returns an array of divs for each search result
                console.log(elem); 

            }
        });
      };

      //send ajax request to server for each domain name to check for username availability
        var len = domains.length;
        for(var i = 0; i<len; i++){
          domainCheck(domains[i]);
          console.log(domains[i]+'\n');
        }
    }
  });
});

Answer 1

您的响应数据类型看起来是JSON，而不是简单的文本。所以，首先你应该将正确的dataType参数传递给ajax调用：

$.ajax({
      url: "/"+username,
      type: "get",
      data: {domainName: domainName, username: username},
      dataType: "json",
      [...]

然后您可以轻松访问success()方法中的数据，如下所示：

      success: function(response){
         if(response.available === "yes") {
             //show?
         } else if(response.available === "no") {
             //hide?
         } else {
             //wtf?
         }
      }

Answer 2

你可以改编一下：

关于文档加载 - ＆gt;条件 - ＆gt;显示或隐藏。您只需要编辑＆＃39; if（$（＆＃34; #maincontent＆＃34;）。width（）＆lt; 600）{＆＃39;

 '$( document ).ready(function() {
 if ($("#maincontent").width() < 600){
        $( "#toolbarright").hide();
 } else { $("#toolbarright").show();}
 });'

http://jsfiddle.net/ablueman/vdgeLsgL/

隐藏div取决于ajax响应结果

2 个答案: