如何基于字符串w id检索JQuery对象?

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.

我甚至尝试过loadEditor($('#tagline'));它仍然不工作。

Here is the HTML

这是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.

点击一个。可编辑元素，使#textedit框出现在它的前面(这是有效的)。在elementSelectionList列表中单击一个条目，就会使#textEdit框出现在与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)

这里有一段更广泛的代码(由于某些原因，js现在还不能正常运行)。只是给出一个更广泛的概述)

3 个解决方案

#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?

它并不完全清楚您正在尝试做什么，但是从我收集的内容来看，您正在尝试使用从一些菜单项的href中检索的ID来更改某些元素。你似乎做的基本上是对的，也许你不是在喂给loadEditor函数你的调用是正确的吗?

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>

$(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.

当您从jQuery获取“href”属性时，您应该能够像您正在做的那样将它直接传递给jQuery选择器。再次检查您的loadEditor代码，因为这可能是问题所在。

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.

编辑:好的，所以，我检查了你的代码，我知道你的问题是什么。在所有实例中，您都没有正确使用jquery选择器函数$()。您正在传递函数jQuery节点(即从$()返回的节点，然后尝试获取节点的节点(没有必要且不会起作用)。一旦有了这个节点，就可以调用该节点上的所有jQuery方法…在您的案例中，您不会再次使用$()在函数内部。在很多情况下，你的做法是不一致的。修复这些错误，应该修复您的代码。

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:

边注，如果你想让你的函数聪明到它是一个jQuery节点，或者一个元素选择器，你可以这样做:

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.

只要确保你的所有实例都是正确的，你就应该做得很好。你所有的概念都是正确的。

#2

You can use the multiple selector. You can also tidy up a bit by chaining calls.

您可以使用多个选择器。你也可以通过打电话来整理一下。

 $(".editable, ui li a[href='#tagline']").not("video, img, textarea")
    .click(function(event) {
        $("#textEdit").css("display", "none")
                      .removeAttr("style")
                      .offset($(this).offset())
                      .css("display", "block")
                      .val($(this).text());
    });

#3

I don't understand what it is you're trying to do.

我不明白你在做什么。

If you're trying to reuse the code to 'launch' the editor, you could do something like this:

如果您试图重用代码来“启动”编辑器，您可以这样做:

$(".editable").not("video, img, textarea")
    .click(function(event) {
        loadEditor($(this);
    });

function loadEditor(element){
    $("#textEdit").css("display", "none");
    $("#textEdit").removeAttr("style");
    $("#textEdit").offset($(element).offset());
    $("#textEdit").css("display", "block");
    $("#textEdit").val($(element).text());
}

#1

CSS

.red {
  background : red;
}