jQuery selector and css error

Question

Problem 1: I have three variables. className references a string. back contains content and link contains a html string. I am trying to assign content to whatever variable className references.

var back = "test";
var className = "link1";
var link1 = '<div id="back" class="gohome"></div><div class="link3"></div><div class="link4"></div>';

Because the below code doesn't seem to be working for me

$(className) = className + back;

Problem 2: The below code doesn't seem to be updating the CSS of whatever variable prevClass contains.

       $('[id*="back"]').each(function(){
            $('.' + prevClass).css({'left': '-123px'});
            $('.' + prevClass).css({'top': '430px'});
            $('.' + prevClass).css({'width': '123px'});
            $('.' + prevClass).css({'height': '44px'});

<script type="text/javascript">

    var back = "";
    var prevClass = "start"
    var className = "Broken";

    start = '<div id="back" class="gohome"></div><div class="link1"></div><div class="link2"></div>';
    gohome = '<div class="gohome"></div><div class="start"></div>';
    link1 = '<div id="back" class="gohome"></div><div class="link3"></div><div class="link4"></div>';
    link2 = '<div class="gohome"></div>';
    link3 = '<div id="back" class="gohome"></div><div class="link5"></div><div class="link6"></div>';
    link4 = '<div class="gohome"></div><div class="link7"></div><div class="link8"></div>';
    link5 = '<div class="gohome"></div><div class="link2a"></div><div class="link10"></div>';
    link6 = '<div class="gohome"></div><div class="link7"></div><div class="link11"></div>';
    link6a = '<div class="gohome"></div><div class="link7"></div><div class="link11"></div>';
    link7 = '<div class="gohome"></div><div class="link6a"></div><div class="link9"></div>';
    link8 = '<div class="gohome"></div><div class="link2a"></div><div class="link10"></div>';
    link9 = '<div class="gohome"></div><div class="link10a"></div>';
    link10 = '<div class="gohome"></div><div class="link12"></div><div class="link13"></div>';
    link10a = '<div class="gohome"></div><div class="link12"></div><div class="link13"></div>';
    link11 = '<div class="gohome"></div><div class="link10a"></div>';
    link12 = '<div class="gohome"></div><div class="link12"></div><div class="link13"></div>';
    link13 = '<div class="gohome"></div><div class="link14"></div><div class="link15"></div>';
    link14 = '<div class="gohome"></div>';
    link15 = '<div class="gohome"></div><div class="link16"></div><div class="link17"></div>';  
    link16 = '<div class="gohome"></div>';
    link17 = '<div class="gohome"></div><div class="link18"></div><div class="link19"></div>';
    link18 = '<div class="gohome"></div>';
    link19 = '<div class="gohome"></div><div class="link20"></div><div class="link21"></div>';
    link20 = '<div class="gohome"></div>';
    link21 = '<div class="gohome"></div>';



   $(document).on('click', '.inter [class]', function () {
   className = this.className; 
   $('[id*="back"]').each(function(){
        $('.' + prevClass).css({'left': '123px'});
        $('.' + prevClass).css({'top': '430px'});
        $('.' + prevClass).css({'width': '123px'});
        $('.' + prevClass).css({'height': '44px'});
    });

   back = '<div class="' + prevClass + '"></div>';
   $('.' + className).html(back);
   prevClass = className;
       $('.inter').fadeTo(250, 0.25, function () {
           $('.inter').html(window[className]); 

           $('.inter').css({'background-image': 'url("' + className + '.png")'});
           $('.inter').fadeTo(250, 1.00);

       });
   });

</script>

I believe I commented on your other question about this, but $("whatever") is not a "jQuery variable". For most of your variable needs, you can just use regular JavaScript variables (i.e. var javascriptVariable = $('.jquerySelector');) — Alex W
– Alex W, Commented May 22, 2013 at 3:06

James S · Accepted Answer · 2013-05-22 03:04:59Z

2

For problem one, you need to select and update a little bit smarter. Since classname is a class name, you want:

$('.' + className)

(Like you've figured out for problem #2)

If you want to update the content (with back):

$('.' + className).html(back);

For problem #2, it's not clear what you're trying to do.

First, is #back already in the DOM? This won't work against your link1 variable. Second, what's prevClass supposed to be?

answered May 22, 2013 at 3:04

James S

3,38425 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sephiith Over a year ago

I'll try clarify. "$(className) = className + back;" In this case "$(className)" should be the variable link1. className should be the link1 content and back should contain the content of back so in reality its link1 = '<div id="back" class="gohome"></div><div class="link3"></div><div class="link4"></div>' + 'test';

sephiith Over a year ago

#back is not currently in the DOM. What I am trying to do is create a back button to the previous class. Maybe I should trigger without any detections. Any idea how I would do that?

Þaw · Accepted Answer · 2013-05-22 03:09:57Z

0

Is your className an anchor tag? you could do something like this

$('.className').attr('href', link1 +'/'+ back);

answered May 22, 2013 at 3:09

Þaw

2,0474 gold badges22 silver badges40 bronze badges

Comments

Fraser · Accepted Answer · 2013-05-22 03:11:14Z

0

Problem 1:

$(className) = className + back;

Just assigns the value link1test to the variable $(className).

e.g: $(className) = "link1test"

If "...back contains content..." and "...you are trying to assign content to whatever variable className references..." then you would use.

$('.' + className).html(back);

Problem 2:

Possibly the selector is incorrect. Are you trying to select a single element with the id back then alter the css of the children with the class prevClass. If so this should work.

   $('#back').each(function(){
        $('.' + prevClass).css({'left': '-123px'});
        $('.' + prevClass).css({'top': '430px'});
        $('.' + prevClass).css({'width': '123px'});
        $('.' + prevClass).css({'height': '44px'});
    });

answered May 22, 2013 at 3:11

Fraser

17.2k8 gold badges58 silver badges112 bronze badges

1 Comment

sephiith Over a year ago

It seems to insert the back content but then it disappears. I'm adding the full code in my post.

user2019515 · Accepted Answer · 2013-05-22 13:56:31Z

0

When using jQuery you can easily select ID's a lot easier like so:

$('#back')

I'm not sure what you expect from the * before your equal sign?

edited May 22, 2013 at 13:56

answered May 22, 2013 at 3:01

user2019515

4,5212 gold badges32 silver badges42 bronze badges

1 Comment

Alcides Queiroz Over a year ago

I don't know what does he really wants, but the [attr*='value'] selector get all elements with the attr containing the string value (no need to be equal, but just contain).

Collectives™ on Stack Overflow

jQuery selector and css error

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related