Question

$("#add-btn-text").click(function(){
    	var $that   = $(this),
        classes = $that.attr('class'),
        theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),
		
        $boxWithSameClass = $(".li."+theDynamicClass);

    	$boxWithSameClass.toggleClass("hide-me added");
    	
});

.hide-me {color:rgba(0,0,0,0.1);}
.added {color:rgba(0,0,0,1);}
.top-added {color: rgba(0,170,200,1);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>

<body>

<div class="col-md-4 label-wrap">
	<h1 class="top-service">header</h1>
		<ul class="li-wrap">
			<li class="hide-me add-btn point dynamicClass1" id="1a">lorem 1</li>
			<li class="hide-me add-btn point dynamicClass2">lorem 2</li>
			<li class="hide-me add-btn point dynamicClass3">lorem 3</li>
			</ul>
</div>


<div class="row row-centered">
	<div class="col-md-4 col-centered service-detail">
		<h2>lorem 1</h2>
		<h3>subhead</h3>
			<p>some text</p>
	</div>
	<div class="col-md-2 col-centered service-detail service-pos">
		<ul class="service-btn-2">
			<li><button type="button" class="btn btn-primary" id="add-btn-text" data-dynamicclass="dynamicClass1">add</button></li>
			<li><button type="button" class="btn btn-primary">other button</button></li>
		</ul>
	</div>
</div>

</body>
</html>

我有几个带按钮的div。单击时，每个按钮都应该向具有相同类的li添加一个类，如按钮。

我搜索并找到了一个我认为合适的解决方案，但我无法让它发挥作用。

Jquery-Code：

$("#add-btn-text").click(function(){
    var $that   = $(this),
    classes = $that.attr('class'),
    theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),

    $boxWithSameClass = $(".li."+theDynamicClass);

    $boxWithSameClass.toggleClass("hide-me added");     
});

据我所知，如果你点击按钮，动态类会过滤掉其他类，只留下“动态”类，每个按钮都不同。接下来，boxWithSameClass标识另一个div中的li，它具有相同的“动态”类，并向li添加/删除想要/不想要的类。

我是对的吗？我不明白，为什么它不起作用。

HTML-Code BUTTON：

<div class="col-md-2 col-centered service-detail service-pos">
   <ul class="service-btn-2">
     <li><button type="button" class="btn btn-primary exp" id="add-btn-text">Hinzufügen</button></li>
     <li><button type="button" class="btn btn-primary">Details</button></li>
   </ul>
   </div>
</div>

HTML-Code LIST：

<div class="col-xs-12">
   <ul>
     <li class="exp">Exposés</li>
     <li>Textdesign</li>
     <li>Anzeigenkampagnen</li>
     <li>Geschäfts- und Presseberichte</li>
     <li>Bautafelgestaltung</li>
     <li>Außenwerbung</li>
   </ul>
</div>

CSS：

.hide-me {color:rgba(0,0,0,0.1);}
.added {color:rgba(0,0,0,1);}
.top-added {color: rgba(0,170,200,1);}

此外，我要做的是：

用户可以点击不同的li，将突出显示。所有突出显示的li应由表格转移。这意味着，客户想要曝光，所以他点击曝光，现在可以看到。现在，客户填写表格并发送。每个突出显示li都应该随身携带。

这可能吗？我不确定我应该搜索什么来找到关于这个主题的主题。这只是一个额外的问题。如果有人能给我一个提示，我会很高兴的。 ;）

Answer 1

您的按钮HTML就是这个

<li><button type="button" class="btn btn-primary" id="add-btn-text" data-dynamicclass="dynamicClass1">add</button></li>

您拥有dynamicclass="dynamicClass1"中的动态类值，而不是class属性中的动态类值。但是在你的jquery中，你试图从class属性中获取动态值，这是错误。

你的错误。

classes = $that.attr('class'),
theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),

将您的逻辑更改为从data属性中读取动态类，如下所示

theDynamicClass = $that.data('dynamicclass');

toggleClass参数也不对，你必须传递一个参数/ class

所以你的最终功能代码如下所示。

$("#add-btn-text").click(function(){
        var $that   = $(this);   // make sure you end each line with a ;
        theDynamicClass = $that.data('dynamicclass');

        $boxWithSameClass = $("li."+theDynamicClass);

        $boxWithSameClass.toggleClass("hide-me").toggleClass("added");
});

希望这有帮助

编辑1：选择器中还有一个错误$(".li."+theDynamicClass)它应该是$("li."+theDynamicClass)注意.之前没有li 。下面的工作演示我也将jquery更改为latst版本2.1.1。如果由于某种原因想要使用旧版本，则必须将代码更改为

theDynamicClass = $that.attr('data-dynamicclass');因为data属性仅在1.4.3版本之后出现。

＆＃13;

$("#add-btn-text").click(function(){
    debugger;
    var $that   = $(this);   // make sure you end each line with a ;
    theDynamicClass = $that.data('dynamicclass');

    $boxWithSameClass = $("li."+theDynamicClass);

    $boxWithSameClass.toggleClass("hide-me").toggleClass("added");
});

＆＃13;

.hide-me {color:rgba(0,0,0,0.1);}
.added {color:rgba(0,0,0,1);}
.top-added {color: rgba(0,170,200,1);}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>

<body>

<div class="col-md-4 label-wrap">
	<h1 class="top-service">header</h1>
		<ul class="li-wrap">
			<li class="hide-me add-btn point dynamicClass1" id="1a">lorem 1</li>
			<li class="hide-me add-btn point dynamicClass2">lorem 2</li>
			<li class="hide-me add-btn point dynamicClass3">lorem 3</li>
			</ul>
</div>


<div class="row row-centered">
	<div class="col-md-4 col-centered service-detail">
		<h2>lorem 1</h2>
		<h3>subhead</h3>
			<p>some text</p>
	</div>
	<div class="col-md-2 col-centered service-detail service-pos">
		<ul class="service-btn-2">
			<li><button type="button" class="btn btn-primary" id="add-btn-text" data-dynamicclass="dynamicClass1">add</button></li>
			<li><button type="button" class="btn btn-primary">other button</button></li>
		</ul>
	</div>
</div>

</body>
</html>

＆＃13;

Answer 2

试试这个JS FIddle

$('.service-btn-2').on('click','button', function(){
    var btn_class =  $(this).attr('class').split(" ");
$('.whatever').find('.'+btn_class[0]).toggleClass("hide-me");

}）;

点击按钮，您想要将一个类切换为具有相同类的li。如果不正确，请纠正我：）

jQuery：过滤类并搜索具有相同类

2 个答案: