我有一个似乎只运行一次的 javascript。我正在使用它来选择 div 中字母的颜色。当我最初选择颜色时它可以工作,但之后不会选择其他颜色。
这是选择:
<div style = "position: absolute; left: 360px; top: 590px;" >
<select id="selectcolor1" name="selectcolor1" style="width: 150px;">
<option value="null">Select a Motif Color...</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="darkblue">Dark Blue</option>
<option value="pink">Pink</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="seagreen">Sea Green</option>
<option value="red">Red</option>
<option value="darkgreen">Dark Green</option>
<option value="bergundy">Bergundy</option>
<option value="cyan">Cyan</option>
<option value="magenta">Magenta</option>
<option value="mustard">mustard</option>
<option value="purple">Purple</option>
这是javascript:
$('#selectcolor1').change(function() {
var color = this.value || '';
$('.selectcolor1').attr('class', function(i, classes) {
var cls = classes.split(/[\s]/);
cls[2] = color;
return cls.join(' ');
});
e.preventDefault();
});
我可能应该提到我正在使用脚本来更改为不同的 Div 的颜色抱歉是我的错:
<div style = "position: absolute; left: 750px; top: 313px;"
class="selected-value selectcolor1" id ="motif" ></div>
<div style = "position: absolute; left: 750px; top: 313px;"
class="selected-value1 selectcolor1" id ="motif1" ></div>
任何帮助都将非常感谢!
最佳答案
这里有几个问题。
正如@cport 所指出的,您没有声明您在e.preventDefault()
中引用的e
变量。这需要进入 change
函数处理程序。
正如@dsuess 指出的那样,您的代码正在更改带有 class="selectcolor1"的标签上的类,这不在您粘贴的代码中 - 请确保这是正确的。
此外,此代码将适用于 the jsfiddle provided below因为它设置了目标的第三类,而目标最初有两个类。但是,如果您从一开始就将目标 HTML 更改为具有三个或更多类,则 Javascript 代码将覆盖第三个类。
但话虽如此,这适用于当前代码:
$('#selectcolor1').change(function(e) {
var color = this.value || '';
$('.selectcolor1').attr('class', function(i, classes) {
var cls = classes.split(/[\s]/);
cls[2] = color; // third class becomes the color value
return cls.join(' ');
});
e.preventDefault();
});
关于JavaScript 只工作一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26897129/