jQuery: 筛选 classes 并搜索具有相同 class 的元素
jQuery: Filter classes and search for element with same class
$("#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>
I have several div's with buttons. On click each button should add a class to a li with the same class like the button.
I searched and found a solution, which I think would fit, but I can't get it to work.
The 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");
});
As I understand it, if u click on the button, the dynamic class filters out the other classes and leaves only the "dynamic" one, which is different on each按钮。 Next the boxWithSameClass identifies the li in an other div, which has the same "dynamic" class and adds/removes the wanted/not-wanted class to/from the li.
Am I right? I don't understand, why it is not working.
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);}
In addition, what I am trying to do is:
The user can click different li's, which will be highlighted. ALL highlighted li shall be transfered by a form. That means, a customer wants an exposé, so he clicks on exposé, which is now visible.
Now, the customer fills out the bystanding form and sends it. EVERY highlighted li should be send with it.
Is this possible? I am not sure what I should search for to find a thread about this topic.
This is only an additional question. Would be glad if someone could give me a hint. ;)
你的按钮HTML是这个
<li><button type="button" class="btn btn-primary" id="add-btn-text" data-dynamicclass="dynamicClass1">add</button></li>
您在 dynamicclass="dynamicClass1" 而不是 class 属性中有动态 class 值。但是在您的 jquery 中，您试图从 class 属性中获取动态值，这是错误的。
你的错误。
classes = $that.attr('class'),
theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),
将您的逻辑更改为 从 data 属性 中读取动态 class，如下所示
theDynamicClass = $that.data('dynamicclass');
还有toggleClass参数不对，必须传单argument/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 更改为最新版本 2.1.1 。如果你出于某种原因想使用旧版本本身，那么你必须将代码更改为
theDynamicClass = $that.attr('data-dynamicclass'); 因为 data 属性 是在 1.4.3 版本之后才出现的。
$("#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");
});
.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/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>
试试这个 JS FIddle
$('.service-btn-2').on('click','button', function(){
var btn_class = $(this).attr('class').split(" ");
$('.whatever').find('.'+btn_class[0]).toggleClass("hide-me");
});
单击您想要将 class 切换为具有相同 class 的按钮。如果不正确，请指正:)
$("#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>
I have several div's with buttons. On click each button should add a class to a li with the same class like the button.
I searched and found a solution, which I think would fit, but I can't get it to work.
The 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");
});
As I understand it, if u click on the button, the dynamic class filters out the other classes and leaves only the "dynamic" one, which is different on each按钮。 Next the boxWithSameClass identifies the li in an other div, which has the same "dynamic" class and adds/removes the wanted/not-wanted class to/from the li.
Am I right? I don't understand, why it is not working.
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);}
In addition, what I am trying to do is:
The user can click different li's, which will be highlighted. ALL highlighted li shall be transfered by a form. That means, a customer wants an exposé, so he clicks on exposé, which is now visible. Now, the customer fills out the bystanding form and sends it. EVERY highlighted li should be send with it.
Is this possible? I am not sure what I should search for to find a thread about this topic. This is only an additional question. Would be glad if someone could give me a hint. ;)
你的按钮HTML是这个
<li><button type="button" class="btn btn-primary" id="add-btn-text" data-dynamicclass="dynamicClass1">add</button></li>
您在 dynamicclass="dynamicClass1" 而不是 class 属性中有动态 class 值。但是在您的 jquery 中，您试图从 class 属性中获取动态值，这是错误的。
你的错误。
classes = $that.attr('class'),
theDynamicClass = classes.replace('btn', '').replace('btn-primary', '').trim(),
将您的逻辑更改为 从 data 属性 中读取动态 class，如下所示
theDynamicClass = $that.data('dynamicclass');
还有toggleClass参数不对，必须传单argument/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 更改为最新版本 2.1.1 。如果你出于某种原因想使用旧版本本身，那么你必须将代码更改为
theDynamicClass = $that.attr('data-dynamicclass'); 因为 data 属性 是在 1.4.3 版本之后才出现的。
$("#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");
});
.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/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>
试试这个 JS FIddle
$('.service-btn-2').on('click','button', function(){
var btn_class = $(this).attr('class').split(" ");
$('.whatever').find('.'+btn_class[0]).toggleClass("hide-me");
});
单击您想要将 class 切换为具有相同 class 的按钮。如果不正确，请指正:)