gpt4 book ai didi

javascript - 一旦文本从一个 UL 移动到另一个 UL,就禁用文本

转载 作者:太空宇宙 更新时间:2023-11-03 23:32:39 25 4
gpt4 key购买 nike

此代码将在单击时将列表中的元素从右侧添加到左侧。我们必须单击弹出图像才能移动。现在我应该做的是从 json 文件中获取元素,一旦我将文本移动到另一个框中,就必须禁用该选择。用户不能再次点击它,换句话说,一个元素只能被选中一次。但该元素不得从第一个列表中删除。请帮忙。提前致谢

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/jquery_ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style>
#firstlist li:hover img {display: inline;}
#firstlist li:hover { background: #CCF5CC; }
#firstlist .ui-selected { background: #80B280; }
#firstlist { list-style-type: none;}
#firstlist li { margin: 3px; padding: 0.3em;}

#seclist {list-style-type: none;}
#seclist li {padding: 0.2em;}

img {display:none;}
</style>
</head>

<body>
<table id="myTable" class= "table table-bordered">
<tr>
<th class="col-md-6 text-center success">
List 1
</th>
<th class="col-md-6 text-center success">
List 2
</th>
</tr>
<tr>
<td class="col-md-6">
<ul id="firstlist">
<li>Apple <img src="next.jpg" id="next1"></li>
<li>Orange <img src="next.jpg" id="next2"></li>
<li>Avacado <img src="next.jpg" id="next3"></li>
<li>Banana <img src="next.jpg" id="next4"></li>
<li>Mango <img src="next.jpg" id="next5"></li>
<ul>
</td>
<td class="col-md-6">
<ul class = "seclist" id = "seclist"> </ul>
</td>
</tr>
</table>

<script>
$(function(){
$( "#firstlist" ).selectable();
});

$(function() {
$( "#seclist" ).selectable();
});

$("img").click(function() {
var text = $(this).closest("li").text();
$('<li />', {html: text}).appendTo('ul.seclist')
});
</script>
</body>
</html>

最佳答案

fiddle demo

检查上面的链接。解绑点击事件即可

     $("img").click(function(event) {
var text = $(this).closest("li").text();
$('<li />', {html: text}).appendTo('ul.seclist');
$(this).unbind('click');
});

它不会删除该元素,只允许您在第一次点击它。

关于javascript - 一旦文本从一个 UL 移动到另一个 UL,就禁用文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24905057/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com