JavaScript 只工作一次

Question

我有一个似乎只运行一次的 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>

任何帮助都将非常感谢!

Answer 1

这里有几个问题。

正如@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();
});