Question

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

这是我正在使用的脚本：

$(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);  
});

无论如何，我试过把＆＃34; e.preventDefault（e）;＆＃34;在许多地方，但没有快乐。

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

与往常一样，你是所有明星帮忙的！提前谢谢！

默认上述脚本的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

发布HTML后

您不是特定于“选择”选择器。你有许多元素，做不同的事情 - 其中只有一个元素包含字体系列的值。

此外，您尚未关闭HTML中的第一个开始标记。

<强>第一

可能是抛出脚本错误。你的底部有一个迷路的e.preventDefault（），它不是任何监听器的一部分。

<强>第二

如果这是在外部脚本（它自己的.js文件）中 - 请确保您没有标记。如果内容是动态的 - 确保在加载/执行此脚本时考虑内容。

Answer 2

对于swiss721的点击事件处理程序，您选择的是标记名为swiss721的元素，而不是类名：

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

您应该在选择器之前添加句点：

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

此外，方法preventDefault()不会接受任何参数，但是在最后的几种情况下你会传递一个参数。

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

Answer 3

$('.verdana')之所以无法工作，是因为没有任何一个元素与一个类＆＃39; verdana＆＃39; （至少在您发布的HTML中）。

您必须在change元素（标识为select）上收听包含所有字体的fonty事件。

$("#fonty").change(function(event) {
    var selectedFont = $(this).val();
    if (selectedFont == "Verdana") {
        $('#changeMe').css('font-family','verdana');
    }
    else if (selectedFont == "Copper Plate Bold") {
        $('#changeMe').css('font-family','copperplatebold');
    }
    // ......
});

增强建议：

如果您设置每个<option>的值，可以缩小您的javascript代码，以便将其用作传递给$('#changeMe').css("font-family", ...)的字体

HMTL：

<select style="width: 150px;" id = "fonty">
    <option selected="selected">Select Your Font....</option>
    <option value="verdana">Verdana</option>
    <option value="copperplatebold">Copper Plate Bold</option>
    <option value="arial">Arial</option>
    ...
</select>

JS：

$("#fonty").change(function(event) {
    var selectedFont = $(this).val();
    $('#changeMe').css('font-family', selectedFont);
});

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

3 个答案: