Question

非常简单-如果我点击<li>标签，我希望它显示在<ul>下方。如果以前已添加过，我不想再次添加。

这是我尝试过的：

$(document).on('click', '.plugin-list li', function() {
    let chosenSlug = $(this).attr('data-plugin-slug');
    var doNotAddThisPlugin = false;
    if ($('.plugin_tag').length === 0) {       
        $('.plugin-list').after(`<div class="plugin_tag tag" data-chosen-plugin-value="${$(this).attr('data-plugin-value')}" data-chosen-plugin-slug="${$(this).attr('data-plugin-slug')}">${$(this).attr('data-plugin-value')}</div>`);
    }
    else {
        $('.plugin_tag').each(function(i, o) {            
            if (chosenSlug === $(this).attr('data-chosen-plugin-slug')) {
                var doNotAddThisPlugin = true;
                return false;
            }
        });
        console.log(doNotAddThisPlugin); // Always false
        if (doNotAddThisPlugin === false) {            
            $('.plugin-list').after(`<div class="plugin_tag tag" data-chosen-plugin-value="${$(this).attr('data-plugin-value')}" data-chosen-plugin-slug="${$(this).attr('data-plugin-slug')}">${$(this).attr('data-plugin-value')}</div>`);
        }
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="plugin-list">
  <li class="plugin-chosen" data-plugin-value="Hello Dolly" data-plugin-slug="hello-dolly">Hello Dolly</li>
  <li class="plugin-chosen" data-plugin-value="Hello Bar" data-plugin-slug="hellobar">Hello Bar</li>
</ul>

因此，在这种情况下，我不希望两次显示“ Hello Dolly”或“ Hello Bar”。

如果变量doNotAddThisPlugin设置为true，我尝试用return false打破循环。问题是doNotAddThisPlugin总是 false。

我在做什么错？如果您有更好的解决方案，请随时推荐。

Answer 1

您的代码是正确的，问题在于，您试图在将doNotAddThisPlugin用作全局变量时在$().each()内部声明了if (chosenSlug === $(this).attr('data-chosen-plugin-slug')) { var doNotAddThisPlugin = true; return false; }，这就是为什么它从未更改的原因

只是改变

if (chosenSlug === $(this).attr('data-chosen-plugin-slug')) {
    /* no var*/doNotAddThisPlugin = true;
    return false;
}

对于

body {
	background-color: #1a3041;
    background-image: radial-gradient(#757580, #1a3041);
	background-repeat: no-repeat;
	background-size: cover;
    }

    html {height:100%}

    .header {
	border-style:solid;
	border-width: 2px;
	border-color: #fa6800;
	background-color: #717171;
	font-family: open sans;
    color: #c1c1c1;
	padding:0px;
	margin:5px;
	margin-top:20px;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    }

    .header h1{
	display:inline;
	font-size:40px;
	padding-left:10px;
    }

    #slogan {
	display: inline-block;
	font-size:20px;
	font-style:italic;
	float:center;
	line-height: normal;
	vertical-align: center;
	padding-right:10px;
	margin-top:0px;

    }

     #menu {
	display: inline-block;
	font-size:25px;
	font-weight:bold;
	float:right;
	line-height: normal;
	vertical-align: bottom;
	margin-top:10px;

    }

    .main {
	background-color:#cdd1d5;
	padding: 10px;
	margin: 25px;
	margin-top:30px;
	margin-bottom: 10px;
	top:70px;
	min-height: calc(100% - 130px - 35px);
	left:0;
	right:0;
	box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
    }

    .footer {
	left:5px;
	right:5px;
	height:30px;
	overflow:hidden;
	border-style:solid;
	border-bottom: none;
	border-width: 2px;
	border-color: #fa6800;
	background-color:#333333;
	padding-left:10px;
	vertical-align:top;
	font-size:12px;
	font-family: open sans;
    color: #c1c1c1;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    }

    a:link{
	text-decoration:none;
    }

    a:link.title, a:visited.title {
	color:#c1c1c1;
    }

    a:link.menu, a:visited.menu, a:link.current, a:visited.current {
	color:#c1c1c1;
	text-decoration:none;
	padding:10px;
    }

    a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
	color:#c1c1c1;
	text-decoration:none;
	padding:10px;
	padding-right:20px;
    }

    a:link:hover.menu{
	background-color:#fa6800;
	padding:10px;
    }

    a:link:hover.lastmenu{
	background-color:#fa6800;
	padding:10px;
	padding-right:20px;
    }

    a:link.current{
	background-color:#333333;
	padding:10px;
    }

    a:link.lastcurrent{
	background-color:#333333;
	padding:10px;
	padding-right:20px;
    }

Answer 2

又矮又甜。您甚至不需要该变量doNotAddThisPlugin。

只需检查$('[data-chosen-plugin-slug="'+chosenSlug+'"]').length < 1的条件

$(document).on('click', '.plugin-list li', function() {
    let chosenSlug = $(this).attr('data-plugin-slug');
    if ($('.plugin_tag').length === 0) {       
        $('.plugin-list').after(`<div class="plugin_tag tag" data-chosen-plugin-value="${$(this).attr('data-plugin-value')}" data-chosen-plugin-slug="${$(this).attr('data-plugin-slug')}">${$(this).attr('data-plugin-value')}</div>`);
    }
    else {
        if($('[data-chosen-plugin-slug="'+chosenSlug+'"]').length < 1) {            
            $('.plugin-list').after(`<div class="plugin_tag tag" data-chosen-plugin-value="${$(this).attr('data-plugin-value')}" data-chosen-plugin-slug="${$(this).attr('data-plugin-slug')}">${$(this).attr('data-plugin-value')}</div>`);
        }
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="plugin-list">
  <li class="plugin-chosen" data-plugin-value="Hello Dolly" data-plugin-slug="hello-dolly">Hello Dolly</li>
  <li class="plugin-chosen" data-plugin-value="Hello Bar" data-plugin-slug="hellobar">Hello Bar</li>
</ul>

如果之前已添加div，请不要添加

2 个答案: