javascript - 更改最大宽度小于 420px 的浏览器的点击事件 id

Question

我想让我的元素响应。对于大屏幕，我的搜索按钮看起来像这样。

对于小型设备，搜索按钮被替换为玻璃搜索字形。就像那样。

问题是我无法更改点击事件的 id。我已经编写了以下代码，但它不起作用。

if (window.innerWidth < 420) {

  document.getElementById("glass-search").addEventListener("click", searchFunction);

} // end of "if statement"

请您建议我实现此功能的正确方法。谢谢! 如果您想了解更多详细信息，请参阅我的 project在代码笔上。

完整的 Javascript 代码

var apiKey = "z4pn22dn47rc7bsjw4jwxv9q";
var appendApiKeyHeader = function(xhr) {
  xhr.setRequestHeader('Api-Key', apiKey)
};

document.getElementById("search").addEventListener("click", searchFunction);

if (window.innerWidth < 420) {

  document.getElementById("glass-search").addEventListener("click", searchFunction);

} // end of "if statement"

function searchFunction() {

  var foundArticle = $("#query").val();

  console.log(foundArticle);

  var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback';

  // Clear content before AJAX call
  $(".list-container").html("");

  $.ajax({
      url: wikiUrl,
      dataType: "jsonp",
      success: function(response) {
          var artList = response[1];
          //console.log(artList);
          for (var i = 0; i < artList.length; i++) {
            var title = artList[i];
            //console.log("Number" + " " + i + " " + title);
            var titleDesc = response[2][i];
            //console.log("Number" + " " + i + " " + titleDesc);
            var url = 'http://en.wikipedia.org/wiki/' + title;
            /////////////////////////////////////////////////////////////////////////
            /////////// Append title div and description div to ".list-container" calss
            /////////////////////////////////////////////////////////////////////////
            $(".list-container").append(
              '<div class="result-item">' +
              '<div class="each-list">' +
              '<a href="' + url + '" target="_blank" >' + title +
              '</a>' +
              '<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>' +
              '<div class="show-more">' +
              '<div id="show-more-inner">MORE</div>' +
              '</div>' +
              '</div>' +
              '<div class="titleDesc">' + '<p>' + titleDesc + '</p>' +
              '</div>' +
              '</div>'
            );

          } // end of "for" loop

          /////////////////////////////////////////////////////////////////////////
          /////////// ------- Display description div on hover--------------------
          /////////////////////////////////////////////////////////////////////////
          $('.show-more').hover(
            function() {
              $(this) // the ".show_more" element which triggered the "hover" event
                .parent(".each-list") // the enclosing ".each-list" <span> (*)
                .next(".titleDesc") // the next sibling with class "titleDesc"
                .show();
            }
          );
          /////////////////////////////////////////////////////////////////////////
          /////////// ------- Hide description div on mouseout--------------------
          /////////////////////////////////////////////////////////////////////////
          $(".show-more").mouseout(
            function() {
              $(this) // the ".show_more" element which triggered the "hover" event
                .parent(".each-list") // the enclosing ".each-list" <span> (*)
                .next(".titleDesc") // the next sibling with class "titleDesc"
                .hide();
            }
          );
          /////////////////////////////////////////////////////////////////////////
          /////////// Not to show "MORE" on "title" div if "title-desc" p is empty
          /////////////////////////////////////////////////////////////////////////
          $('.result-item>div.titleDesc>p').each(function() {
            if ($(this).is(':empty')) {
              $('.show-more', $(this).parents('.result-item')).hide();
            }
          })

          var name = foundArticle;
          var searchRequest = {
            "phrase": name
          }

          function GetSearchResults() {
            // Clear content before AJAX call
            $(".wrapper").html("");
            $.ajax({
              type: "GET",
              beforeSend: appendApiKeyHeader,
              url: "https://api.gettyimages.com/v3/search/images",
              data: searchRequest
            }).success(function(data, textStatus, jqXHR) {
              var images = data.images;
              for (var i = 0; i < images.length; i++) {
                var uri = images[i].display_sizes[0].uri;
                var caption = images[i].title;
                $(".wrapper").append(
                  '<div class="item">' +
                  '<div class="polaroid">' +
                  '<img src = "' + uri + '" />' +
                  '<div class="caption">' + caption + '</div>' +
                  '</div>' + // polaroid
                  '</div>' // end of "item"
                );
                console.log(caption);
              }

              //console.log(data.images);

            }).fail(function(data, err) {

              console.log(data);

            });
          } // end of "GetSearchResults" function

          GetSearchResults();

        } // success function end

    }) // ajax function

  return false;

} // click function

HTML

<section class="top-bar">
  <div class="container">
      <p id = "top-bar-paragraph">this is not official wikipedia page please refer to <a href="https://www.wikipedia.org/" target="_blank">wikipedia.org</a></p>
  </div>
</section>

<section class="project-name-class">

  <div class="container">

    <div class="row">

        <div class="col-md-8 col-md-offset-2">

        <img src="http://res.cloudinary.com/nzmai/image/upload/v1471508759/Wikipedia-Search_n8wfpx.png" alt="image" />

      </div>

    </div>

  </div>


</section>

<section class="searched-section">

    <div class="container">

        <div class="row">

            <div class="col-md-6 col-md-offset-3">

              <div class="input-container">
                <input id="query" type="search" placeholder="Kanye West" />
                <div class="button" type="submit" id="search">
                  <p>search</p>
                </div>
                <span id = "glass-search" class="glyphicon glyphicon-search" aria-hidden="true"></span>
              </div>

            </div>

        </div>

      <div class="row">
        <div class="col-md-8 col-md-offset-2 list-container">

        </div>
      </div>


    </div>

</section>

<section class="related-images">
<h1>Realated images</h1>
<div class="wrapper">

</div> <!--end of "wrapper"-->

</section>

CSS

* {
  padding:0;
  margin:0;
}
.top-bar {
  background-color:#e0f2f1;
  height:50px;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
  position: relative;
}

.paragraph-container {
  margin:0 auto;
}

#top-bar-paragraph {
  text-align:center;
  margin-top:10px;
  font-family: 'Roboto', sans-serif;
  font-weight:bold;
  font-size:14px;
  opacity:0.7;
}

.project-name-class {
  background-color:white;
  height:200px;
}

.col-md-8 img {
  margin-top:30px;
  width:100%;
}

.searched-section {
  min-height:630px;
  background-color:#6ca19c;
  background-image:repeating-radial-gradient(
       circle,
    #34495e, #34495e 45%,
    transparent 45%, transparent 60%,
    #34495e 60%, #34495e 100%
  );
  background-size: 3px 3px;
}

.input-container {
  width:100%;
  margin:0 auto;
  position: relative;
  background-color:#afdcd8;
  border:2px solid #7d8382;
  margin-top:60px;
  height:70px;
  border-radius:5px;
}

input {
  position: absolute;
  height:55px;
  width:80%;
  top:5px;
  left:6px;
  border:2px solid #7d8382;
  border-radius:5px;
  line-height:30px;
  font-size:22px;
  padding-left:10px;
  color:#009688;
  font-size:30px;

}

::-webkit-input-placeholder {
  font-family: 'Roboto', sans-serif;
  opacity:0.7;
}

.button {
  width:90px;
  height:40px;
  background-color:#6e56b8;
  position:absolute;
  border-radius:5px;
  margin-top:12px;
  right:10px;
  cursor:pointer;
  text-indent: 10px;
}

.button p {
  font-size:24px;
  text-align:center;
  font-family: 'Roboto', sans-serif;
  color:#a7e3dc;
}

.each-list {
  margin-top:20px;
  position:relative;
  display:block;
  width:100%;
  height:60px;
  background-color:#6e56b8;
  border:0.3px solid #E1F5FE;
  padding-left:10px;
}

.each-list:hover > .show-more {
  width:150px;
  -webkit-transition: width 500ms ease-in-out;
}


.each-list a {
  font-size:28px;
  margin-top:10px;
  color:#b2dfdb;
  text-decoration:none;
}

.each-list a:hover {
  text-decoration:underline;
}

.show-more {
  position:absolute;
  cursor:pointer;
  height:100%;
  width:0;
  background-color:#e0e0e0;
  display:inline;
  right:0;
  text-overflow: ellipsis;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
  -webkit-box-shadow: -4px 1px 6px 2px rgba(122,55,122,0.55);
  -moz-box-shadow: -4px 1px 6px 2px rgba(122,55,122,0.55);
  box-shadow: -4px 1px 6px 2px rgba(122,55,122,0.55);
}

.show-more #show-more-inner {
  width:80px;
  font-weight:bold;
  margin:10px auto;
  color:#9e9e9e;
  font-size:28px;
  font-family: 'Lato', sans-serif;
}

.titleDesc {
  width:500px;
  height:auto;
  background-color:#6e56b8;
  margin-top:20px;
  margin-left:100px;
  display:none;
}
.titleDesc p {
  text-align:center;
  font-size:28px;
  color:#b2dfdb;
  font-family: 'Lato', sans-serif;
}
.list-container {
  margin-bottom:200px;
}

.glyphicon-search {
  position:absolute;
  font-size:30px;
  right:5%;
  top:20px;
  display:none;
}

.glyphicon-chevron-down {
  right:10px;
  display:none;
  position:absolute;
  font-size:24px;
  top:15px;
  color:#00BFA5;
  opacity:0.3;
}
.glyphicon-chevron-down:hover {
  opacity:1;
}


/*****PARALOID*****/
* {
  box-sizing: border-box;
}
body {
  background-color: #e4d4bb;
  background-image: repeating-radial-gradient(circle, 
    #E4D4BB, #E7DAC6 50%, #E7DAC6 100%
  );
  background-size: 10px 10px;
}
img {
  max-width: 100%;
  height: auto;
}
.wrapper {
  width: 100%;
  padding: 0 2rem;
  text-align: center;
}
.polaroid {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.2);
}
.caption {
  font-size: 1.125rem;
  text-align: center;
  line-height: 2em;
}
.item {
  display: inline-block;
  margin-top: 2rem;
  filter: grayscale(100%);
}
.item .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) {
  transform: scale(0.8, 0.8) rotate(5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) .polaroid:before {
  transform: rotate(6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+2) {
  transform: scale(0.8, 0.8) rotate(-5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+2) .polaroid:before {
  transform: rotate(-6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+4) {
  transform: scale(0.8, 0.8) rotate(3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+4) .polaroid:before {
  transform: rotate(4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:nth-of-type(4n+3) {
  transform: scale(0.8, 0.8) rotate(-3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+3) .polaroid:before {
  transform: rotate(-4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:hover {
  filter: none;
  transform: scale(1, 1) rotate(0deg) !important;
  transition: all 0.35s;
}
.item:hover .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transform: rotate(0deg);
  height: 90%;
  width: 90%;
  bottom: 0%;
  right: 5%;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
  transition: all 0.35s;
}

.caption {
  max-width:200px;
}
.related-images h1 {
  font-family: 'Roboto', sans-serif;
  opacity:0.7;
  text-align:center;
}

@media all and (max-width: 1199px) {
  .button {
    width:70px;
    height:40px;
  }
  .button p {
  font-size:20px;
}

@media all and (max-width: 991px) {
  .button {
    width:90px;
    height:40px;
  }
  .button p {
  font-size:24px;
}

}

@media all and (max-width: 600px) {
  .button {
    display:none;
  }
  .button p {
  font-size:24px;
}
  .glyphicon-search {
    display:block;
  }

}

@media all and (max-width: 420px) {
  .show-more {
    display:none;
  }
  .glyphicon-chevron-down {
    display:block;
  }

  .each-list a {
    font-size:16px;
}


}

Answer 1

您可以使用 Window.matchMedia() 方法:

var searchClickEvent = function() {
  if (window.matchMedia("(min-width: 420px)").matches) {
    document.getElementById("search").addEventListener("click", searchFunction);
  } else {
    document.getElementById("glass-search").addEventListener("click",   searchFunction);
  }
}

window.onresize = function() {
  searchClickEvent();
};