在onclick上添加类，然后在下一次单击时选择该类 [英] Adding class onclick and then selecting by that class on next click
问题描述
我只是在做一些测试场景，试图更多地了解jquery。我明白，我想要做的不会工作，我相信我可以查找一个更复杂的解决方案涉及切换或东西，但我想知道为什么这不会工作的逻辑...
我想要一个按钮，当按下时插入文本。再次按下它时，会插入一组不同的文本。我试图玩整个添加/删除类的东西，所以我试图添加类'text1'到我的textarea div。然后我继续创建另一个单击函数，试图选择我刚刚添加的'text1'类，并再次插入HTML。
如果我在'textarea'下面有'textarea.text1'选择器（如我的示例所示）选择器，那么可以理解的方式是添加text1类，它立即进入文本内容2
我想通过上面的textarea.text1选择器将移动经过第一个.click而不做任何事情，然后添加类。这似乎不工作...
然后我想再次点击ChangeText按钮，让它找到我的脚本的第一部分类。 ...
任何人都可以解释为什么这不工作和最简单的方法来完成这个？
提前致谢。
Javascript：
$（document）.ready ）{
$（'。changetext'）。click（function（）{
$（'。textarea'）。html（'< p> Text Content 1< / p>'）。addClass （'text1'）;
}）;
$（'。changetext'）。click（function（）{
$（'.textarea.text1'）。html（'< p> Text Content 2< / p>'）;
}）;
}）;
HTML：
< body>
< div class =textarea>< / div>
< button class =changetext> ChangeText< / button>
< / body>
Jfiddle： http://jsfiddle.net/nlaffey/qzKJx/1/
它不是很清楚你想要做什么。我想你知道你是双重绑定点击事件。我想基本的问题是如何通过点击一个按钮循环通过一些文本和类。
$（document）.ready（function（）{
var $ ta = $（' .textarea'），
text = ['Text Content 1'，'Text Content 2'，'Text Content 3'];
$（'.textarea'）。data textindex'，-1）;
function rotateText（）{
var cls = $ ta.prop（'class'），
idx = $ ta.data '），
maxidx = text.length;
if（idx ++ == maxidx - 1）idx = 0;
while（maxidx - ）{
$ ta.removeClass（'text'+ maxidx）;
}
$ ta.html（text [idx]）addClass（'text'+（idx））
。 data（'textindex'，idx）;
}
$（'。changetext'）。click（rotateText）;
}）;
I'm just doing test scenarios trying to understand jquery a little more. I understand that what I'm trying to do won't work and I'm sure I could look up a more complicated solution involving toggle or something but I'd like to know the logic behind why this wont work...
I would like to have a button that when pressed inserts text. When it is pressed again it inserts a different set of text. I'm trying to play with the whole adding/removing classes thing so I'm trying to add class 'text1' to my textarea div. I then go on and create another click function that tries to select that 'text1' class that I just added and insert HTML again.
If I have the 'textarea.text1' selector below my 'textarea' (as shown in my example) selector it understandably goes through and adds the text1 class and then finds it and immediately enters the "Text Content 2"
I thought by having the 'textarea.text1' selector above it would move past the first .click without doing anything and then add the class. This doesn't seem to work...
I then expected to click on the ChangeText button again and have it find the class in the first part of my script.....
Can anyone explain why this isn't working and the simplest method to accomplish this?
Thanks in advance.
Javascript:
$(document).ready(function() {
$('.changetext').click(function() {
$('.textarea').html('<p> Text Content 1</p>').addClass('text1');
});
$('.changetext').click(function() {
$('.textarea.text1').html('<p> Text Content 2</p>');
});
});
HTML:
<body>
<div class="textarea"></div>
<button class="changetext">ChangeText</button>
</body>
Jfiddle: http://jsfiddle.net/nlaffey/qzKJx/1/
It is not very clear what you are trying to do. I think you know you are double binding the click event. I think the underlying question is how to cycle through some text and classes by clicking a button.
$(document).ready(function () {
var $ta = $('.textarea'),
text = ['Text Content 1', 'Text Content 2', 'Text Content 3'];
$('.textarea').data('textindex', -1);
function rotateText(){
var cls = $ta.prop('class'),
idx = $ta.data('textindex'),
maxidx = text.length;
if (idx++ == maxidx - 1) idx = 0;
while(maxidx--){
$ta.removeClass('text' + maxidx );
}
$ta.html(text[idx]).addClass('text' + (idx))
.data('textindex', idx);
}
$('.changetext').click(rotateText);
});
这篇关于在onclick上添加类，然后在下一次单击时选择该类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
