我有一个带有两个按钮的简单部分,这些元素是动态创建的,我想使用jquery将输入追加到第一个按钮。
这是我的解决方法
HTML
<div id="interactive-layers">
<div class="go_back">Go back</div>
<div buttonid="3" class="video-btns show" targetmovieid="4" starttime="2.44" endtime="8.36">
<span class="label">Submit</span></div>
<div buttonid="81" class="video-btns show" targetmovieid="undefined" starttime="2.44" endtime="8.36">
<span class="label">undefined</span></div>
</div>
Js
var getButons = $('.video-btns').attr('buttonid');
var targetmovieid = $(videobtns).attr('targetmovieid');
if(getButons == 81 && targetmovieid =='undefined'){
var inputf = $("<input id='username' style='background: red' class='sync-element' starttime='3' endtime='6'></input>");
inputf.appendTo('.video-btns');
}else{
console.log('something is fucking wrong');
}
现在,当我运行我的应用程序时,我得到以下结果
<div id="interactive-layers">
<div class="go_back">Go back</div>
<div buttonid="81" class="video-btns show" targetmovieid="4" starttime="2.44" endtime="8.36">
<span class="label">Submit</span>
<input id="username" style="background: red" class="sync-element" starttime="3" endtime="6">
</div>
<div buttonid="3" class="video-btns show" targetmovieid="undefined" starttime="2.44" endtime="8.36">
<span class="label">undefined</span>
<input id="username" style="background: red" class="sync-element" starttime="3" endtime="6">
</div>
</div>
我的代码添加到两个按钮,我只想使用buttonid=81
添加到按钮
我在做什么错了?
答案 0 :(得分:2)
$('.video-btns').each(function() {
var getButons = $(this).attr('buttonid');
var targetmovieid = $(this).attr('targetmovieid');
if (getButons == 81 && targetmovieid == 'undefined') {
var inputf = $("<input id='username' style='background: red' class='sync-element' starttime='3' endtime='6'></input>");
inputf.appendTo(this);
} else {
console.log('something is fucking wrong');
}
});
答案 1 :(得分:1)
不确定这是否是您要查找的内容,但是如果您将JS代码更改为此:
$('.video-btns').each(function(key, value) {
let buttonid = $(this).attr("buttonid");
let targetmovieid = $(this).attr("targetmovieid");
console.log(buttonid + ', ' + targetmovieid)
if(buttonid == 81 && targetmovieid =='undefined'){
var inputf = $("<input id='username' style='background: red' class='sync-element' starttime='3' endtime='6'></input>");
inputf.appendTo($(this));
}
});
@Tyddlywink提到,它将通过遍历并获取匹配的按钮将输入追加到满足您条件的按钮上。
您可能可以对buttonid和targetmovieid进行一些过滤或传递一些参数,以使其更通用,以满足您的需求。
答案 2 :(得分:0)
您要将appendTo
定位为类为video-btns
的所有元素,而不仅仅是具有if
条件中指定的两个属性的元素。此外,当您获得jQuery集合的attr()
时,将获得该集合中 first 元素的结果,而不是该集合中 any 的结果。>
使用方括号表示法,可以通过立即选择所需的按钮(包括选择器中 的两个属性的条件)来简化生活, >
var $btn = $('.video-btns[buttonid=81][targetmovieid=undefined]');
if (!$btn.length) {
console.log('something is very wrong');
} else {
$btn.append($("<input>", { id: 'username', style: 'background: red', class: 'sync-element', starttime: 3, endtime: 6 }));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="interactive-layers">
<div class="go_back">Go back</div>
<div buttonid="3" class="video-btns show" targetmovieid="4" starttime="2.44" endtime="8.36">
<span class="label">Submit</span></div>
<div buttonid="81" class="video-btns show" targetmovieid="undefined" starttime="2.44" endtime="8.36">
<span class="label">undefined</span></div>
</div>
答案 3 :(得分:0)
https://jsfiddle.net/tyddlywink/6b2frvz8/
执行此操作,而不是var getButons = $('。video-btns'),然后遍历结果$ .each(getButons),检查每个项目的buttonid。
<div id="interactive-layers">
<div class="go_back">Go back</div>
<div buttonid="3" class="video-btns show" targetmovieid="4" starttime="2.44" endtime="8.36">
<span class="label">Submit</span></div>
<div buttonid="81" class="video-btns show" targetmovieid="undefined" starttime="2.44" endtime="8.36">
<span class="label">undefined</span></div>
</div>
Javascript:
$(document).ready(function() {
var getButons = $('.video-btns');
$.each(getButons, function() {
var targetmovieid = $(this).attr('targetmovieid');
if ($(this).attr("buttonid") == 81 && targetmovieid == 'undefined') {
var inputf = $("<input id='username' style='background: red' class='sync-element' starttime='3' endtime='6'> </input>");
inputf.appendTo($(this));
} else {
console.log('something is Family Show wrong');
}
})
})
答案 4 :(得分:-2)
您将输入追加到.video-btns类,因此该元素被添加到两个按钮中。尝试使用Id而不是类进行附加。
编辑:
var $btn = $('.video-btns');
$.each($btn, (index, currentBtn) => {
if($(currentBtn).attr('buttonid') == '81' && $(currentBtn).attr('targetmovieid') == "undefined")
{
$(currentBtn).append($("<input>", { id: 'username', style: 'background: red', class: 'sync-element', starttime: 3, endtime: 6 }));
}
})