最大幅が420ピクセル未満のブラウザのクリックイベントのIDを変更します。

Question

私のプロジェクトを反応させたいと思います。大きな画面の場合、検索ボタンは次のようになります。小型デバイスの検索ボタンについては

ガラス検索glyphiconによって置き換えられます。それで

問題は、私はクリックイベントのIDを変更することはできませんです。私は次のコードを書いたが、うまくいきません。

if (window.innerWidth < 420) { 

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

} // end of "if statement" 

この機能を実装する正しい方法を教えてください。ありがとう！ 詳しくは、projectのcodepenをご覧ください。

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