Поэтому проблема в том, что я хочу создать два разных входа, но изменить их одну и ту же переменную. По сути, у меня есть один вход, который виден только на мобильном телефоне и планшете в свернутой панели навигации, а другой виден в центре страницы на рабочем столе и на больших экранах.

Входное значение модифицирует var username. Проблема, которая у меня возникла, заключается в том, что она, кажется, принимает значение только первого входного сигнала. Итак, если я нахожусь на рабочем столе, второй вход ничего не возвращает, но это единственный показанный ввод.

Я пытался назначить общие идентификаторы и имена для входов безрезультатно. Если я иду на мобильный, ввод работает так, как задумано. Я думаю, это потому, что поле мобильного ввода появляется перед полем ввода на рабочем столе в коде.

Вот подходящий 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);
} 

Любые идеи?

1
Elliott McNary 17 Дек 2015 в 03:22

3 ответа

Лучший ответ

Используйте :visible селектор

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

$("input[name=userSearch]:visible") будет видимым полем ввода.

3
void 17 Дек 2015 в 00:28

Вот один из способов сделать это: https://jsfiddle.net/f28zraee/2/

Создать два входа, один мобильный и один рабочий стол. Затем используйте медиа-запрос, чтобы изменить его для мобильных устройств.

 .mobile{display: none}
@media (max-width: 600px){
  .mobile{display: inline;}
  .desktop{display: none;}
}
1
Adam Buchanan Smith 17 Дек 2015 в 00:29

Вы должны добавить слушателя изменений и изменить имя второго <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);
} 
1
Nicola Peluchetti 17 Дек 2015 в 00:28