Beginner jQuery Questions (FF/IE issue)_问答_开发者

开发者 https://www.devze.com 2023-01-18 14:19 出处：网络

I\'ve been playing around a bit, with jQuery, just trying to do some replacing of text fields on click of a l开发者_Python百科ink and hiding/showing of content items as well. It seems to be working ju

相关专题：firefox jquery

I've been playing around a bit, with jQuery, just trying to do some replacing of text fields on click of a l开发者_Python百科ink and hiding/showing of content items as well. It seems to be working just fine in IE, but I can't seem to get it to work in FF.

My jQuery:

$(function() {

$(".articles a").click(function() {
    articlenumber = "1"
    $(articlenumber).css("display", "none");
    articlenumber = $(this).attr("id");
    articlename = $(this).attr("name");
    articlenumber = '".' + articlenumber + '"';
    //alert(articlenumber);
    //$(articlenumber).css("display", "inline");
    $(articlenumber).attr("style", "display:inline;")
    $(".articletitle").text(articlename)
});

And my HTML for this(simplified):

<a id="article1" name="Article Title1" href="#">Link</a>
<a id="article2" name="Article Title2" href="#">Link</a>
<div class="articlename">Title</div>
<div class="article1" style="display:none;">Text 1</div>
<div class="article2" style="display:none;">Text 2</div>

Any suggestions as to why this isn't working in FireFox? And anything I can clean up here?

$(".articles a").click(function() {
    articlenumber = "1"
    $(articlenumber).css("display", "none");
    articlenumber = $(this).attr("id");
    articlename = $(this).attr("name");
    articlenumber = '".' + articlenumber + '"';
    $(articlenumber).attr("style", "display:inline;")
    $(".articletitle").text(articlename)
});

Okay, in order of your script:

Declare your variables before you try to assign values, terminate the line and remember that 1 is numeric not a string:

articlenumber = "1"

should be

var articlenumber = 1;

jQuery typically expects the identifier to be an id, a class or an element-type (a, li etc). Neither an id nor a class can start with a number, they have to start with either and underscore _ or a letter (plus a couple other characters I can't remember), and there are no elements <1>. This could be a problem since with:

$(articlenumber)

is equivalent to either:

$(1) or $('1')

both of which are, or should be, invalid (I think).

Then you're reassigning articlenumber again without first declaring it a var (the same is true in the following line when you initialise articlename.

I'm not sure if these are your main problems (I removed your commented-out code), but fix the obvious, then we can talk more.

I would suggest, strongly, that you get hold of Firebug and watch its console as you load/interact with the page in Firefox. It'll tell you the main problems you're having. Also, as an addenda, I'd strongly suggest that you develop your sites/scripts with either Google Chrome (with the Web Inspector), Safari Webkit (as with Chrome), Mozilla Firefox (with Firebug, as above) and/or Opera (with Dragonfly). These browsers and web-development tools will more or less force you to develop your scripts properly. Once they're working, and valid, then try it in IE.

More often than not it'll work there if it works everywhere else, developing in IE first seems to allow you to develop bad habits, and error-prone JavaScript/jQuery, and then become confused, flustered or frustrated when the other browsers refuse to play ball.

Try changing this line:

$(".articletitle").text(articlename)

$(".articletitle").html(articlename)

Also I'm wondering if the class descriptors (.articletitle and .articlename) are correct? .articletitle class I do not see in the HTML - only in the javascript.. unless that's somewhere else.