我在函數中將$（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元素，則可以按#favorites保留代碼。

但是，如果您要執行的操作是將該html附加到clicked元素上，即當您使用$(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,output

當您使用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集合，該selector是當前context DOM節點的子節點，盡管如果您不指定一個，則會有一個自動選擇器（我認為是document.body ） 。 遍歷jQuery的集合各種功能使可作為特定元素this JavaScript的范圍內。 要從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);
    });
});