Question

所以我遇到的问题是我想创建两个不同的输入，但让它们修改相同的变量。基本上，我有一个输入只能在折叠导航栏中的移动设备和平板电脑上看到，另一个输入在桌面中央和大屏幕上可见。

输入值正在修改var username。我遇到的问题是它似乎只取第一个输入的值。所以，如果我在桌面上，第二个输入没有返回任何内容，但它是唯一显示的输入。

我尝试为输入分配公共ID和名称无济于事。如果我继续使用移动设备，输入就会按预期工作。我认为这是因为移动输入字段出现在代码中的桌面输入字段之前。

以下是适用的HTML：

<nav class="visible-xs visible-sm navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse" id="collapsed">
      <ul class="nav navbar-nav">
        <li><a href="#trackList">Tracks</a></li>
        <li><a href="#queueList">Queue</a></li>
        <li>
        <input name="userSearch" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">
      </input>
      <button class="btn" id="tracks">Tracks :)</button>
      <button class="btn" id="favorites">Favorites :)</button>
      <button class="btn" id="clearQueue">Clear My Queue</button>
        </li>

      </ul>
    </div>
  </div>
</nav>
<div id="queueApp" class="wrapper">
  <div class="row col-md-12">
    <div class="col-md-4 pages">
      <h1>Your Tracks, Fam</h1>
      <span class="prev">
      <span class="prevPage glyphicon glyphicon-backward"></span>
      <p class="prevPage">Previous</p>
      </span>
      <span class="next">
      <p class="nextPage">Next</p>
      <span class="nextPage glyphicon glyphicon-forward"></span>
      </span>


    </div>

    <div class="col-md-4 search visible-md visible-lg">
      <input name="userSearch" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">
      </input>
      <button class="btn" id="tracks">Tracks :)</button>
      <button class="btn" id="favorites">Favorites :)</button>
      <button class="btn" id="clearQueue">Clear My Queue</button>
    </div>
  </div>

这是适用的JS：

function getTracks(){
      titleList.length = 0;
      artistList.length = 0;
      imgList.length = 0;
      idList.length = 0;
         $(".trackList").html("");
        username = $("input[name=userSearch]").val();
        subSection = "tracks";
        getAPIURL(username, subSection); 
        getAPI(apiurl);
}

有什么想法吗？

Answer 1

使用:visible选择器

username = $("input[name=userSearch]:visible").val();

$("input[name=userSearch]:visible")将成为可见输入字段。

Answer 2

您应该添加一些更改侦听器并更改第二个<input>的名称，然后使用提交时的值（如果您不需要提交则可能不需要）

<input name="userSearch" class="input-listener" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">
<input name="userSearch2" class="input-listener" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">

的javascript：

     var valueOfLastModifiedInput;
$( '.input-listener' ).on( 'change', function( e ) {
   valueOfLastModifiedInput = $( this ).val(); 
} ); 
function getTracks(){
      titleList.length = 0;
      artistList.length = 0;
      imgList.length = 0;
      idList.length = 0;
         $(".trackList").html("");
        username = valueOfLastModifiedInput;
        subSection = "tracks";
        getAPIURL(username, subSection); 
        getAPI(apiurl);
}

Answer 3

以下是一种方法：https://jsfiddle.net/f28zraee/2/

创建两个输入，一个移动和一个桌面。然后使用媒体查询将其更改为移动设备。

HasOne could not be converted to string

如何有两个不同的输入（一个用于移动，一个用于桌面）修改同一个变量？

3 个答案: