Question

我想拥有它，以便根据存储在被点击元素中的某种引用，单击一个元素会影响另一个元素。我有以下脚本，但它似乎没有正常运行：

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

我甚至尝试使用loadEditor($('#tagline'));并且它仍然无效。

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

我想要的功能如下：

单击.editable元素会使#textedit框出现在它前面（这是有效的）。单击elementSelectionList列表中的项应该使#textEdit框出现在元素前面，并且对应于href的id。

（大量编辑）和here is a broader swath of code（由于某种原因，现在js在小提琴中运行不正常......只是为了给出更广泛的概述）

Answer 1

您可以使用multiple selector。你也可以通过链接电话来整理一下。

 $(".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());
    });

Answer 2

我不明白你想要做什么。

如果您尝试重复使用代码来“启动”编辑器，您可以执行以下操作：

$(".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());
}

Answer 3

关于你想要做什么并不完全清楚，但是从我收集的内容来看，你正在尝试使用从某个菜单项的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>

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');
    });
});

从jQuery获取'href'属性时，你应该可以像往常一样直接将它传递给jquery选择器。再次，检查您的loadEditor代码，因为这可能是问题所在。

编辑：好的，所以，我查看了您的代码，我看到了您的问题所在。您并未在所有实例中正确使用jquery选择器函数$()。您正在传递函数jQuery节点（即从$()返回的节点，然后尝试获取节点的节点（不必要且不起作用）。一旦有了该节点，就可以调用所有jQuery方法在那个节点上...在你的情况下，你不再在函数内部使用$()。在很多情况下你不一致地做这个。修复这些错误，应该修复你的代码。

实施例

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注意，如果你希望你的函数对jQuery节点或元素选择器是智能的，你可以这样做：

function doSomething(element) {

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

    //Code to handle jQuery node here
}

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

如何根据字符串w id检索JQuery对象？

3 个答案: