Jquery $(this) 范围错误

Question

我有问题，也许我会得到帮助。

我有一个导航，当我点击导航点时，我想从点击的导航点获取 ID。

我的问题是，我没有用 $(this) 取回 ID。我把整个 index.js 都拿回来了。

疯狂的是，当我使用以下代码片段执行此操作时，它起作用了。但这不是我最喜欢的方式。我喜欢第二种方式，因为它更干净。

    $('.menuContent p').on('click', function () {
        var clickedMenuEntry = $(this).attr('id');

        switch (clickedMenuEntry) {
            case 'yourData': yourDataSite();
                break;
        }
    });

这里开始无效的方式。

    <div class="col-md-6 menuContent">
        <p id="yourData"><i class="fa fa-user"></i>Deine Daten</p>
        <p id="yourSuccess"><i class="fa fa-trophy"></i>Deine Erfolge</p>
        <p id="surveys"><i class="fa fa-comments"></i>Umfragen</p>
        <p id="yourMatches"><i class="fa fa-calendar"></i>Turniere an denen du teilnimmst</p>
        <p id="money"><i class="fa fa-money"></i>Jahresbeitrag / Budget</p>
        <p id="yourStatics"><i class="fa fa-line-chart"></i>Statistik</p>
    </div>




(function () {
"use strict";

document.addEventListener('deviceready', onDeviceReady.bind(this), false);

function onDeviceReady() {
    // Verarbeiten der Cordova-Pause- und -Fortsetzenereignisse
    document.addEventListener('pause', onPause.bind(this), false);
    document.addEventListener('resume', onResume.bind(this), false);
    $('.appIsLoading').remove();
    bindEvents();
};

/*
* @return {void}
*/ 
function bindEvents() {
    var $body = $('body');
    $body.on('click', '.menu', showAndHideNavigation);
    $body.on('click', '.menuContent p', switchToRequestedSite);
}

/*
* @return {void}
*/
function showAndHideNavigation() {
    var $menuContent = $('.menuContent');
    var statusOfMenuContent = parseInt($('.menuContent').css('left'));

    if (statusOfMenuContent < 0) {
        $menuContent.css('left', '0%');
    } else {
        $menuContent.css('left', '-78%');
    }
}

/*
* @return {String}
*/
function getClickedNavigationEntry() {
    return $(this).attr('id');
}

/*
* @return {void}
*/
function switchToRequestedSite() {
    var clickedMenuEntry = getClickedNavigationEntry();

    switch (clickedMenuEntry) {
        case 'yourData': yourDataSite();
            break;
    }
}

Answer 1

我会建议这样的事情

function bindEvents() {
    var $body = $('body');
    $body.on('click', '.menu', showAndHideNavigation);
    $body.on('click', '.menuContent p', function(){
        switchToRequestedSite($(this));
    });
}

/*
* @return {void}
*/
function showAndHideNavigation() {
    var $menuContent = $('.menuContent');
    var statusOfMenuContent = parseInt($('.menuContent').css('left'));

    if (statusOfMenuContent < 0) {
        $menuContent.css('left', '0%');
    } else {
        $menuContent.css('left', '-78%');
    }
}

/*
* @return {void}
*/
function switchToRequestedSite(clickedMenuEntry ) {

    switch (clickedMenuEntry) {
        case 'yourData': yourDataSite();
            break;
    }
}

Answer 2

getClickedNavigationEntry() 在 switchToRequestedSite()

内部调用时不继承 this

可以使用 bind() 或仅将元素作为参数传递以提高可读性

function switchToRequestedSite() {

  // pass element to fn
  var clickedMenuEntry = getClickedNavigationEntry(this);

  // or much simpler
  var clickedMenuEntry = this.id;

  switch (clickedMenuEntry) {
    case 'yourData':
      yourDataSite();
      break;
  }
}

function getClickedNavigationEntry(el) {
  return el.id;
}

不确定为什么你需要一个函数来 return 一个元素 ID

Jquery $(this) 范围错误

Jquery $(this) wrong scope

javascript

jquery

this