JS实现点击选中，再点击取消，并将选择项呈现在顶部列表

最新推荐文章于 2024-04-07 09:49:21 发布

leo_qiu_s

最新推荐文章于 2024-04-07 09:49:21 发布

阅读量2.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qiudechao1/article/details/102968520

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

js怎么实现点击下面包房为选中状态（厅的名字显示在上面，包房图片变换加深），再次点击某厅取消（厅的名字从上面取消，包房图片变换为原来未加深图片）。

<html>
<head>
    <title>zhong</title>
    <style type="text/css">
    #divName { height:100px; }
    #divName label { display:inline-table; height:20px; line-height:20px; margin:0 5px; }
    .divImgIn { width:100px; height:100px; background:blue; color:#000; }
    .divImgOut { background:green; }
    </style>
</head>
<body>
    <div id="divName">
         
    </div>
    <div>
        <div class="divImgIn" name="广州">广州</div>
        <div class="divImgIn" name="上海">上海</div>
        <div class="divImgIn" name="深圳">深圳</div> 
    </div> 
</body>
</html> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        // 为 class = divImgIn 的控件绑定 click 事件
        $(".divImgIn").click(function() {
            // 使用 toggleClass ，如果 class 中没有 divImgOut 则附加上，有则减掉
            $(this).toggleClass("divImgOut");
            // 获得当前的 class ，要么是 divImgIn ，要么是 divImgIn divImgOut
            var css = $(this).attr("class");
            // 获得点击的房子的 name 属性
            var name = $(this).attr("name");
            // 这个逻辑判断根据你的需求写
            if (css != "divImgIn") {
                // 这句是加上一个label
                $("#divName").append($("<label name='" + name + "'>" + name + "</label>"));
            } else {
                // 这句是删除 label 中 name = name 的
                $("#divName").find("label[name='" + name + "']").remove();
            }
        })
    }) 
</script>