使用其他脚本时，Javascript 保持默认

Question

我正在构建的网站上有一些 JavaScript，当使用另一个脚本时我无法做到不默认。有趣的是，并非页面上的所有 javascript 都会导致问题。

这是我正在使用的脚本:

$(document).ready(function() {

    $('.verdana').click(function(e) {
        $('#changeMe').css('font-family','verdana');
        e.preventDefault();  
    });

    $('.arial').click(function(e) {
        $('#changeMe').css('font-family','arial');
        e.preventDefault();  
    });

    $('.tahoma').click(function(e) {
        $('#changeMe').css('font-family','tahoma');
        e.preventDefault();  
    });

    $('.times').click(function(e) {
        $('#changeMe').css('font-family','times');
        e.preventDefault();  
    });

    $('.copperplatebold').click(function(e) {
        $('#changeMe').css('font-family','copperplatebold');
        e.preventDefault();  
    });

    $('swiss721').click(function(e) {
        $('#changeMe').css('font-family','swiss721');
        e.preventDefault();  
    });

    $('.baskerville').click(function(e) {
        $('#changeMe').css('font-family','baskerville');
        e.preventDefault();  
    });

    $('.oldenglish').click(function(e) {
        $('#changeMe').css('font-family','oldenglish');
        e.preventDefault();  
    });


    $('.timesnewroman').click(function(e) {
        $('#changeMe').css('font-family','timesnewroman');
        e.preventDefault();  
    });

    $('.castellar').click(function(e) {
        $('#changeMe').css('font-family','castellar');
        e.preventDefault();  
    });

    $('.calibri').click(function(e) {
        $('#changeMe').css('font-family','calibri');
        e.preventDefault();  
    });

    $('.scriptmtbold').click(function(e) {
        $('#changeMe').css('font-family','scriptmtbold');
        e.preventDefault();  
    });

    $('.lucidacal').click(function(e) {
        e.preventDefault(e);  
    });

    // select font in dropdown list to change font-family of #changeMe
    $('select').change(function() {
        if($(this).val() == "Default font"){
            $('#changeMe').css('font-family',"");
        } else {
            $('#changeMe').css('font-family',$(this).val());
        }
    }); 
    e.preventDefault(e);  
});

不管怎样，我试过把“e.preventDefault(e);”在很多地方却没有快乐。

另一个可能的线索是，似乎是我的 javascript 也使用下拉菜单进行选择。

一如既往，您的帮助是全明星!提前致谢!

默认上述脚本的HTML元素

<div style = "position: absolute; left: 160px; top: 490px;">
<select style="width: 150px;" id = "fonty">
<option selected="selected">Select Your Font....</option>
<option>Times New Roman</option>
<option>Verdana</option>
<option>Copper Plate Bold</option>
<option>Swiss721</option>
<option>Baskerville</option>
<option>OldEnglish</option>
<option>Castellar</option>
<option>Calibri</option>
<option>ScriptMTBold</option>
<option>LucidaCal</option>

<div style = "position: absolute; left: 160px; top: 440px;" >    
<select id="selectcolor" name="selectcolor" style="width: 150px;">
                    <option value="null">Select Text Colour...</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>

 </select>
 </div>


<div style = "position: absolute; left: 160px; top: 540px;">
<select id="category-navbar" name="category-navbar" style="width: 150px;">
<option value="">Motif Set One...</option>
<option value="H">motif 1</option>
<option value="rs">motif 2</option>
<option value="2">motif 3</option>
<option value="y">motif 4</option>
<option value="f">motif 5</option>
<option value="j">motif 6</option>
<option value="m">motif 7</option>
<option value="-,">motif 8</option>
<option value="[">motif 9</option>
<option value=";">motif 10</option>
<option value="V">motif 11</option>
<option value="N">motif 12</option>
<option value="R">motif 13</option>
<option value="]">motif 14</option>
<option value="F">motif 15</option>
<option value="t">motif 16</option>
<option value="">none...</option>
</select>
</div>

以及我正在影响的文本的 div:

<!--The address div-->     
<div class="selectcolor" style = "position: absolute; left: 425px; top: 360px;"id="changeMe">....please add you address using the box on the left</div>

Answer 1

对于单击 swiss721 的事件处理程序，您选择的是标签名称为 swiss721 的元素，而不是类名称:

$('swiss721').click(function(e) { // This line
    $('#changeMe').css('font-family','swiss721');
    e.preventDefault();  
});

您应该在选择器之前添加一个句点:

$('.swiss721').click(function (e) {

此外，preventDefault() 方法不接受任何参数，但在最后的一些情况下您会向它传递一个参数。

最后，您在 select 处理程序之后有一个无关的 e.preventDefault()。