javascript - 单击选项卡时如何更改占位符文本

Question

我希望占位符相对于单击的选项卡发生变化。即:catalog-'search catalog' website-搜索网站。

/*! CSS Used from: https://www.provolibrary.com/templates/provolibrary/css/pcl-general.css */
div,a,form{margin:0;padding:0;border:0;vertical-align:baseline;}
a,a:visited{color:#4f2683;text-decoration:none;}
a:active,a:hover{text-decoration:underline;}
a{font-weight:700;}
#search-box a{font-weight:400;}
@media handheld, screen and (min-width: 620px){
.search-tab,.search-tab-link{display:inline;color:#fff;background-color:#7bc143;text-decoration:none;padding:8px;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.search-tab:hover{background-color:#807f83;}
.search-tab.selected{color:#fff;background-color:#4f2683;}
.search-tab-link{background-color:#009ddc;}
#search-box{position:relative;min-height:100px;clear:both;margin:-71px 0 0;float:right;display:block;z-index:999;padding:0;}
#search-box .search-bar{background:#fff;height:24px;border-bottom:1px solid #807f83;border-left:1px solid #807f83;border-top:1px solid #807f83;}
#search-box input{float:left;margin:0;}
#search-box input:focus{outline:none;}
#search-box #search-text-icon{float:left;width:auto;height:auto;position:absolute;right:0;margin:-1px 15px 0 0;cursor:pointer;}
#search-box #search-text{height:23px;width:75%;border:0;font-size:13px;line-height:23px;font-family:Helvetica, Arial, sans-serif;background:transparent;color:#000;margin:0;padding:0 0 0 11px;}
.search-tab-content{background-color:#4f2683;padding:15px;margin-top:8px;}
#search-old-catalog{text-align:left;}
}
@media screen and (min-width: 1040px){
#search-box{top:40px;}
}
@media handheld, screen and (max-width: 619px){
#search-box{display:none;}
input[type="text"]{-webkit-appearance:none;border-radius:0;}
}

<form style="margin-top:40px;" id="search-box" action="/website-search">
  <div class="search-tab" data-search-type="catalog">Catalog </div>
  <div class="search-tab selected" data-search-type="website">Website </div>

  <a href="t$003f/" target="_blank" style="text-decoration:none">
      <div class="search-tab-link"> Login </div>
  </a>

  <div class="search-tab-content">
      <div class="search-bar">
          <input type="text" id="search-text" placeholder="Search Website" name="q">
          <input type="image" alt="go" id="search-text-icon" title="Search" src="/templates//images/search_website_btn.png">
      </div>
  </div>
  <div id="search-old-catalog"> <a href="http://.com/" target="_blank">Old Catalog</a></div>
</form>

Answer 1

使用简单易读的 JavaScript 相对简单。

首先，您要查找具有该类的所有元素。

var searchTabs = document.querySelectorAll('.search-tab');

然后，遍历每个元素并附加一个点击监听器。

for (var i = 0; i < searchTabs.length; i++) {
    searchTabs[i].addEventListener('click', function(event) {

        var searchType = event.target.dataset.searchType;

        document.getElementById("search-text").placeholder = "Search " + searchType;
    });
}

您将在上面的代码片段中看到，我已经为该事件定义了一个处理程序。

它将根据 data-search-type 属性替换元素(在本例中为搜索栏)占位符。

这是一个 Fiddle .