我把$(this)放在函数中的什么位置

Question

由于我想在这些函数中使用类而不是id（我有三个相同的函数，但我想附加不同的东西），我确信我需要在这些函数的某个位置放置$（this），以便在单击按钮时只触发一个函数，而不是全部三个函数。但我不确定，因为我完全是jquery/js的初学者，所以我希望能得到一些帮助。

$(document).ready(function () {
    $(".onclick").click(function () {
        $('#favorites').append('<div data-role="main"class="ui-content"><div  class="ui-grid-b"><div class="ui-block-a">Arrow</div><div class="ui-block-b">More Info</div><div class="ui-block-c">Unfavorite</div></div></div>');
    });
});

http://codepen.io/anon/pen/JYxqEw-HTML和Jquery代码

Answer 1

$('.onclick')选择类为onclick的所有元素。这意味着，每当单击带有class="onclick"的东西时，该函数就会启动。

如果您希望所有这些元素都将该HTML附加到#favorites元素，那么您可以保持代码原样。

然而，如果您要做的是将该html附加到单击的元素，也就是说，当您使用$(this)时——它选择了您使用jQuery单击的元素——那么您可以直接附加到该元素，即：

$(document).ready(function () {
    $(".onclick").click(function () {
        // this will append the HTML to the element that triggered the click event.
        $(this).append('<div data-role="main"class="ui-content"><div  class="ui-grid-b"><div class="ui-block-a">Arrow</div><div class="ui-block-b">More Info</div><div class="ui-block-c">Unfavorite</div></div></div>');
    });
});

编辑

因此，要将每个.onclick的内容插入到#favorites中，需要使用DOM节点的innerHTML值。小提琴示例：

http://jsbin.com/qazepubuzu/edit?html，js，输出

当您使用jQuery选择某些内容时，实际上您不仅返回了DOM节点，还返回了一个jQuery对象——该对象既包含对实际DOM节点（[0]）的引用，也包含一个jQuery对象（[1]）。

因此，要选择具有$(this)的DOM节点，您的目标节点是：$(this)[0]。然后，您可以使用.innerHTML()来获取节点的HTML内容，并按照自己的意愿进行操作。

最终结果：

$(function () {
  $('.onclick').click(function () {
    $('#favorites').append( $(this)[0].innerHTML );
  });
});

Answer 2

所以构建块并没有那么复杂，但我认为你是一个新手jQuery开发人员，所以你可能还不清楚jQuery和JS之间的区别。

$(selector, context)允许我们为CSS selector创建一个jQuery集合，该集合是当前contextDOM节点的子节点，但如果您不指定一个，则会有一个自动集合（我认为是document.body）。在jQuery集合上迭代的各种函数使特定元素在JavaScript中作为this可用。要从HTML片段中的.onclick元素到达strong元素，您需要在层次结构中向上移动，然后到达适当的元素。然后，我们可以从元素中收集文本。我们可以在JS或jQuery中实现这一点。

要做到这一点，只需jQuery:

// AP style title case, because Chicago is too crazy.
var to_title_case = (function () { // variable scope bracket
    var lower_case = /b(?:a|an|the|and|for|in|so|nor|to|at|of|up|but|on|yet|by|or)b/i,
        first_word = /^(W*)(w*)/,
        last_word = /(w*)(W*)$/;
    function capitalize(word) {
        return word.slice(0, 1).toUpperCase() + word.slice(1).toLowerCase();
    }
    function capitalize_mid(word) {
        return lower_case.exec(word) ? word.toLowerCase() : capitalize(word);
    }
    return function to_title_case(str) {
        var prefix = first_word.exec(str),
            str_minus_prefix = str.slice(prefix[0].length),
            suffix = last_word.exec(str_minus_prefix),
            center = str_minus_prefix.slice(0, -suffix[0].length);
        return prefix[1] + capitalize(prefix[2]) + center.replace(/w+/g, capitalize_mid)
                + capitalize(suffix[1]) + suffix[2];
    };
})();
$(document).ready(function() {
    $(".onclick").click(function () {
        var text = $(this).parents('.ui-grid-a').find('.ui-block-a').text();
        var html = '<div data-role="main"class="ui-content">'
                 + '<div class="ui-grid-b"><div class="ui-block-a">' 
                 + to_title_case(text) + '</div><div class="ui-block-b">More Info</div>'
                 + '<div class="ui-block-c">Unfavorite</div></div></div>';
        $("#favorites").append(html);
    });
});