Question

I want to have it so that clicking one element affects a different one, based on some kind of reference stored in the clicked element. I have the following script, but it doesn’t seem to be running properly:

 $("#elementSelectionList li a").click(function(event) { 
    var targetElement = $(this).attr('href');
    loadEditor($(targetElement));
});

I have even tried with loadEditor($('#tagline')); and it’s still not working.

Here is the HTML

<div id="preview">
     <h1 id="tagline" class="editable">The tagline</h1>
</div>


<div id="elementSelectionList">
     <ul>
           <li><a href="#tagline">Tagline</a></li>
     </ul>
</div>

The functionality I want is the following:

clicking an .editable element makes the #textedit box appear in front of it (that’s working). clicking an item in the elementSelectionList list should make the #textEdit box appear in front of the element with corresponding id to the href.

(edited heavily) and here is a broader swath of code (the js isn’t running proper in the fiddle right now for some reason.. it’s just to give a broader overview)

Answer 1

It isn’t completely clear on what you are trying to do, but from what I gather, you are trying to change some element with the ID that you retrieving from the href of some menu item. You seem to be doing it basically right, maybe the you are not feeding the loadEditor function you are calling correctly?

CSS

.red {
  background : red;
}

HTML

<div id="preview">
    <h1 id="tagline" class="editable">The tagline</h1>
    <h1 id="tagline2" class="editable">The tagline2</h1>
    <h1 id="tagline3" class="editable">The tagline3</h1>
</div>


<div id="elementSelectionList">
    <ul>
        <li><a href="#tagline">Tagline</a></li>
        <li><a href="#tagline2">Tagline2</a></li>
        <li><a href="#tagline3">Tagline3</a></li>
    </ul>
</div>

JS

$(function() {
    //Set Click event for children with 'a' tags
    $('#elementSelectionList a').click(function() {

        //Remove Style
        $('#preview').children('.red').removeClass('red');

        //Get Node from HREF
        var node = $(this).attr('href');

        //Apply Style
        $(node).addClass('red');
    });
});

When grabbing the ‘href’ attribute from jQuery, you should be able to pass it directly to the jquery selector as you were doing. Again, check your loadEditor code, as that may be where the issue is.

EDIT: Ok, so, I reviewed your code and I see what your problems are. You are not using the jquery selector function $() correctly in all instances . You are passing your functions jQuery nodes (i.e. the node that is returned from $(), then trying to get the node of the node (unnecessary and will not work). Once you have that node, you can call all jQuery methods on that node…you do not use the $() on it again inside the function in your case. There are many cases where you are doing this inconsistently. Fixing these errors, should fix your code.

Ex.

function doSomething(node) {

    //Show the element, apply some CSS class, get Text
    node.show()
        .addClass('class');

    var txt = node.text();
}

function doOther(node) {

   //Hide the element, and remove class
   node.removeClass('class')
       .hide();
}

$(function() {

    //Anti-pattern...THIS WILL NOT WORK
    //doOther('#test');
    //doSomething('#test');

    //Correct Usage
    doOther($('#test'));
    doSomething($('#test'));
});

Side Note, if you want your functions to be intelligent to it being a jQuery node, or a element selector, you can do this:

function doSomething(element) {

    if(typeof(element) === 'string') {
        element = $(element);
    }

    //Code to handle jQuery node here
}

Just make sure all your instances are correct, and you should be good to go. All your concepts look correct.