[英]How to have two different inputs (one for mobile, one for desktop) modify the same variable?
so the issue I am having is that I want to create two different inputs, but have them modify the same variable. 所以我遇到的问题是我想创建两个不同的输入,但让它们修改相同的变量。 Basically, I have one input that is only visible on mobile and tablet in the collapsed navbar, and the other is visible in the center of the page on desktop and larger screens.
基本上,我有一个输入仅在折叠的导航栏中显示在移动设备和平板电脑上,而另一个则在台式机和大屏幕页面的中心可见。
The input value is modifying var username. 输入值正在修改var用户名。 The problem that i'm having is that it seems to only take the value of the first occurring input.
我遇到的问题是,它似乎只采用第一个出现的输入的值。 So, if i'm on desktop, the second input isn't returning anything, but it's the only input shown.
因此,如果我在台式机上,第二个输入不返回任何内容,但这是显示的唯一输入。
I've tried assigning common id's and names to the inputs to no avail. 我尝试将常见的ID和名称分配给输入无济于事。 If I go on mobile, the input works just as intended.
如果我使用移动设备,则输入将按预期工作。 I think this is because the mobile input field occurs before the desktop input field in the code.
我认为这是因为移动输入字段出现在代码中的桌面输入字段之前。
Here's the applicable HTML: 以下是适用的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>
And here's the applicable JS: 这是适用的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);
}
Any ideas? 有任何想法吗?
Use :visible
selector 使用
:visible
选择器
username = $("input[name=userSearch]:visible").val();
$("input[name=userSearch]:visible")
will be the visible input field. $("input[name=userSearch]:visible")
将是可见的输入字段。
You should add some change listener and change the name of the second <input>
, then use the value on submit ( might not be needed if you do not need to submit ) 您应该添加一些更改侦听器并更改第二个
<input>
的名称,然后使用submit上的值(如果不需要提交,则可能不需要)
<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: 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);
}
Here is one way to do it: https://jsfiddle.net/f28zraee/2/ 这是一种实现方法: https : //jsfiddle.net/f28zraee/2/
create two inputs, one mobile and one desktop. 创建两个输入,一个移动设备和一个桌面。 Then use a media query to change it for mobile.
然后使用媒体查询将其更改为移动设备。
.mobile{display: none}
@media (max-width: 600px){
.mobile{display: inline;}
.desktop{display: none;}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.