单击一个具有字符串名称的类以激活另一个类
Click one class with string name to activate another class
我有下面的代码,它的工作原理类似于-当你点击一个随机字母(它有一个由字符串分配的类名)时,在不同的容器中显示另一个类,但与它同名。
例如A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
F O O T B A L
从aphabet中单击A会更改A在单词football中的可见性这是代码:
$('.answer, .answer2, .answer3').click(function(){
answer.push($(this).data("value")); //push clicked to array
checkString = answer.toString(); //convert to string
checkAnswer = checkString.split(""); //split string
console.log(answer); //display the answer in console
$('#page1').hide(); //hide page 1
$('#page2').show().append('<div id="answerswer"></div>'); //show answer on page, each char needs to be wrapped
for(var i = 0; i < checkAnswer.length; i++) {
$('#answer').append('<span class="answerswer-string ' + checkAnswer[i] + '" data-answer="' + checkAnswer[i] + '">' + checkAnswer[i] + '</span>');
}
});
$('#page2').each(function (i) {
var keyboard = '';
for(var i = 97; i <= 122; i++) {
keyboard += '<div class="letter" data-letter="'+String.fromCharCode(i)+'">'+String.fromCharCode(i)+'</div>';
}
$(this).append(keyboard);
});
$('.letter').each(function(ev){ //each letter
$(this).one('click', function(ev){ //when clicked
$(this).css("opacity", "0.8");
console.log($(this).data("letter")); //log the clicked letter
if(checkAnswer.indexOf($(this).data("letter"))!=-1) { //if clicked letter is in string display success
$(this).css("background", "rgb(145, 255, 185)");
console.log("YES");
}
因此,理想情况下,如果checkAnswer有一个被点击字母的索引,那么用与被点击字母相同的字母将css添加到span类中,希望这是有意义的!
http://jsfiddle.net/xA3YT/不过,在这里,忽略功能,因为这只是我的工作方式-基本上,当字母变为绿色(或在控制台日志中表示是)时,它应该显示#answer
中的一个<span>
(脚本的第16行),很明显,我知道如何激活CSS,但我不知道如何触发它,无论类是否匹配(这可能是一件非常简单的事情,我忽略了,我不确定-谢谢!)
只需根据单击的字母创建一个类选择器:
$("." + $(this).data("letter")).css('visibility', 'visible');
这里的JSFiddle(在第33行添加了此代码)
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 使用clickToggle并在单击另一个元素时关闭元素
- 使用javascript将动态表从一个html页面打印到另一个html页
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- 在单击按钮时激活按钮的悬停状态,直到单击另一个按钮(Javascript/JQuery)
- jquery日期选择器-选择时激活另一个日期选择器
- 单击一个具有字符串名称的类以激活另一个类
- 将鼠标悬停在某个班级时激活另一个班级
- 加载另一个相同页面时,使用新数据激活第一个网页
- jQuery - 激活一个切换按钮会禁用另一个
- 当另一个类被激活时添加一个类
- 如何激活另一个选项卡后重新加载相同的php文件点击一个按钮
- 如何激活另一个html文件中的链接
- Javascript绑定事件处理程序的另一个函数激活/结束
- 将类更改为另一个名称,使其不会't在jquery中激活onClick,然后重置
- WSH (JScript)将CLI参数传递给内部激活的另一个脚本
- 如何在另一个元素被激活时关闭一个元素
- 如何知道脚本是使用WSH激活的,还是由另一个脚本在内部激活的
- 在javascript中单击另一个按钮后激活按钮