我正在构建的网站上有一些 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>
最佳答案
对于单击 swiss721
的事件处理程序,您选择的是标签名称为 swiss721
的元素,而不是类名称:
$('swiss721').click(function(e) { // This line
$('#changeMe').css('font-family','swiss721');
e.preventDefault();
});
您应该在选择器之前添加一个句点:
$('.swiss721').click(function (e) {
此外,preventDefault()
方法不接受任何参数,但在最后的一些情况下您会向它传递一个参数。
最后,您在 select
处理程序之后有一个无关的 e.preventDefault()
。
关于使用其他脚本时,Javascript 保持默认,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26981620/