Question

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

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

我的问题是，我没有用$（这个）取回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()

内调用时，

this不会继承switchToRequestedSite()

可以使用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;
}

不确定为什么只需返回元素ID

Jquery $（这个）错误的范围

2 个答案: