按id更改多个列表项的类的条件语句
Conditional statement to change class by id for multiple list items
我有两个带有列表项的div,我正试图在拖放时切换类。代码如下所示。
<div class="wrapper">
<div id="togglelinks" class="left-column">
<ul id="sortable1" class="sortable">
<li class="ui-state-default"><a href=""><img src="img/icon-music.svg" /></a></li>
<li class="ui-state-default"><a href=""><img src="img/icon-nav.svg" /></a></li>
<li class="ui-state-default"><a href=""><img src="img/icon-seats.svg" /></a></li>
<li class="ui-state-default"><a href=""><img src="img/icon-phone.svg" /></a></li>
<li class="ui-state-default"><a href=""><img src="img/icon-weather.svg" /></a></li>
<li class="ui-state-default"><a href=""><img src="img/icon-email.svg" /></a></li>
<li class="ui-state-default"><a href=""><img src="img/icon-calendar.svg" /></a></li>
</ul>
</div>
<div id="stage" class="right-column">
<ul id="sortable2" class="sortable">
<li id="music" class="stagearea"><!-- Content Here --></li>
<li id="nav" class="stagearea"><!-- Content Here --></li>
<li id="climate" class="stagearea"><!-- Content Here --></li>
<li id="phone" class="stagearea"><!-- Content Here --></li>
<li id="weather" class="stagearea"><!-- Content Here --></li>
<li id="email" class="stagearea"><!-- Content Here --></li>
<li id="calendar" class="stagearea"><!-- Content Here --></li>
</ul>
</div>
</div>
我试图将类从类"stagearea"拖放到另一个由列表项中的唯一id集拉取的类。我的javascript看起来是这样的。
<script>
if ($("#music").addClass('droppedmusic')) {
}
else if ($("#nav").addClass('droppednav')) {
}
else if ($("#climate").addClass('droppedclimate')) {
}
else if ($("#phone").addClass('droppedphone')) {
}
else if ($("#weather").addClass('droppedweather')) {
}
else if ($("#email").addClass('droppedemail')) {
}
else if ($("#calendar").addClass('droppedcalendar')) {
}
</script>
到目前为止,我已经可以为第一个列表项提取类了,但其余的都没有。对任何人都没什么帮助?
下面这样的怎么样。无需ID:
<div id="stage" class="right-column">
<ul id="sortable2" class="sortable">
<li class="stagearea" data-addclass="droppedmusic"><!-- Content Here --></li>
<li class="stagearea" data-addclass="droppednav"><!-- Content Here --></li>
<li class="stagearea" data-addclass="droppedclimate"><!-- Content Here --></li>
<!--etc -->
</ul>
</div>
有了这个Jquery:
$('#sortable2').on('click','.stagearea', function () {
var $t=$(this); //get item that was clicked on
//read the addclass attribute and add it as a class
$t.addClass($t.attr('data-addclass'));
});
次要Jquery更新
$('#sortable2').on('droppable','.stagearea', function () {
var $t=$(this); //On droppable rather than on click.
//read the addclass attribute and add it as a class
$t.addClass($t.attr('data-addclass'));
});
相关文章:
- 这个条件语句的逻辑有问题
- 使用条件语句,使 jquery fadeIn/fadeOut 仅在视口 >= 480px 时才有效
- 照片滑块的条件语句
- 使用解析为javascript源的.php,如何使用条件语句将javascript代码封装在php括号之间
- 在Javascript中将条件语句转换为变量
- 如何在脚本块中使用jade/pug条件语句
- 文档中的多个条件语句
- 在元素中搜索字符串,然后将其放入条件语句中
- Node.js Jade:在 JavaScript 中使用条件语句
- Javascript在条件语句内部定位
- 条件语句II
- 呈现为纯文本的Jade条件语句
- resize中的条件语句不会在每次满足条件时触发
- 是否可以将条件语句或其他javascript作为参数传递到ember句柄中
- 如果不满足条件语句,则触发引导模式
- 在条件(if)结构的条件语句中是否有定义变量的有效方法
- text()的jQuery条件语句(三元)
- JavaScript模板引擎-将左手三进制(不带赋值)转换为条件语句
- 为什么'我的条件语句使用javascript中的正则表达式
- 无法使用条件语句停止 javascript 函数