如何有兩個不同的輸入（一個用於移動，一個用於桌面）修改相同的變量？

所以我遇到的問題是我想創建兩個不同的輸入，但讓他們修改相同的變量。基本上，我有一個輸入只能在摺疊式導航欄中的移動設備和平板電腦上看到，另一個輸入在桌面和大屏幕的頁面中間可見。如何有兩個不同的輸入（一個用於移動，一個用於桌面）修改相同的變量？

輸入值正在修改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); 
}

任何想法？

來源

2015-12-17 Elliott McNary

使用:visible選擇

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

$("input[name=userSearch]:visible")將是可見的輸入字段。

來源

2015-12-17 00:28:27 void

This works great！非常感謝你。但是我意識到輸入的按鈕不起作用。他們看起來像：'$（「＃tracks」）。off（「click」）。on（「click」，getTracks）;' 我打算在ID後面加上：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); 
}

來源

2015-12-17 00:28:17

下面是做到這一點的一種方法：https://jsfiddle.net/f28zraee/2/

創建兩個輸入，一個手機和一個桌面。然後使用媒體查詢將其更改爲移動版。

.mobile{display: none} 
@media (max-width: 600px){ 
    .mobile{display: inline;} 
    .desktop{display: none;} 
}

來源

2015-12-17 00:29:41

如何有兩個不同的輸入（一個用於移動，一個用於桌面）修改相同的變量？

回答

相關問題