如何让两个不同的输入(一个用于移动设备，一个用于桌面）修改同一变量

How to have two different inputs (one for mobile, one for desktop) modify the same variable?

本文关键字：一个 用于 移动 变量 桌面 修改 两个 输入      更新时间：2023-09-26

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

输入值是修改var用户名。我遇到的问题是，它似乎只接受第一个出现的输入的值。所以，如果我在桌面上，第二个输入不会返回任何内容，但它是显示的唯一输入。

我尝试过为输入分配常见的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);
}

有什么想法吗？

使用:visible选择器

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

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

您应该添加一些更改侦听器并更改第二个<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);
}

这里有一种方法：https://jsfiddle.net/f28zraee/2/

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

 .mobile{display: none}
@media (max-width: 600px){
  .mobile{display: inline;}
  .desktop{display: none;}
}
相关文章：