无法使用 $(this) 按 ID 获取元素

Question

我不确定为什么，但是当我尝试运行这个函数时：

$(this).click(function(){
    setArroPos($(this));
});

定义为：

function setArroPos($element){
    var selector = $("#selector");
    var primeiraPos = parseFloat($("#selector").css("left"))
    var leftOffSet = 0;
    var curent = 0;
    var newValue;

    alert($element.attr("id"));

    switch($element.attr("id")){
        case '#tratamento-imagem':
            newValue = primeiraPos;
            break;
        case '#portfolio':
            leftOffSet = $("#portfolio").outerWidth(true);
            curent = parseFloat(selector.css("left"));
            newValue = leftOffSet+curent;
            break;
        case '#fotografia':
            leftOffSet = $("#fotografia").outerWidth(true);
            curent = parseFloat(selector.css("left"));
            newValue = leftOffSet+curent;
            break;
        case '#montagem':
            newValue = ($("#thumb-services").width()) - primeiraPos;
            break;
    }

    selector.animate({left: newValue+'px'});
}

警报输出 "Undefined" 作为 ID。我想要做的是获取我单击的任何元素的 ID，然后与 switch 语句中的情况进行比较，以便定义我站点中的箭头应该走多远。我点击的所有元素都有一个 ID，所以它没有给我 "Undefined" 因为我点击了一个没有 ID 的元素。

这里是相关的HTML:

    <nav id="thumb-services">
        <a id="tratamento-imagem" class="menu-item">
            <div class="hover-menu">
                <p class="menu-p"> Tratamento de Imagem </p>
            </div>
        </a>
        <a id="portfolio" class="menu-item">
            <div class="hover-menu">
                <p class="menu-p"> Pós Produção </p>
            </div>
        </a>
        <a id="fotografia" class="menu-item">
            <div class="hover-menu">
                <p class="menu-p"> Fotografia </p>
            </div>
        </a>
        <a id="montagem" class="menu-item">
            <div class="hover-menu">
                <p class="menu-p"> Portifólio </p>
            </div>
        </a>    
    </nav>
    <div id="main-info">
        <div id="selector"></div>
        <div id="panel">
            <p id="teste">Hello world!</p>
        </div>
    </div>

Answer 1

也许要让它工作你需要改变它：

$(this).click(function(){
    setArroPos($(this));
});

至：

$("a.menu-item").click(function(){
    setArroPos($(this));
});

您当前代码中的 $(this) 很可能指的是 window 对象，而该对象没有设置 id 属性。

示例：

$(document).ready(function(){
  $("a.menu-item").click(function(){
      setArroPos($(this));
  });
});


function setArroPos($element){
    var selector = $("#selector");
    var primeiraPos = parseFloat($("#selector").css("left"))
    var leftOffSet = 0;
    var curent = 0;
    var newValue;

    alert($element.attr("id"));

    switch($element.attr("id")){
        case '#tratamento-imagem':
            newValue = primeiraPos;
            break;
        case '#portfolio':
            leftOffSet = $("#portfolio").outerWidth(true);
            curent = parseFloat(selector.css("left"));
            newValue = leftOffSet+curent;
            break;
        case '#fotografia':
            leftOffSet = $("#fotografia").outerWidth(true);
            curent = parseFloat(selector.css("left"));
            newValue = leftOffSet+curent;
            break;
        case '#montagem':
            newValue = ($("#thumb-services").width()) - primeiraPos;
            break;
    }

    selector.animate({left: newValue+'px'});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="thumb-services">
        <a id="tratamento-imagem" class="menu-item">
            <div class="hover-menu">
                <p class="menu-p"> Tratamento de Imagem </p>
            </div>
        </a>
        <a id="portfolio" class="menu-item">
            <div class="hover-menu">
                <p class="menu-p"> Pós Produção </p>
            </div>
        </a>
        <a id="fotografia" class="menu-item">
            <div class="hover-menu">
                <p class="menu-p"> Fotografia </p>
            </div>
        </a>
        <a id="montagem" class="menu-item">
            <div class="hover-menu">
                <p class="menu-p"> Portifólio </p>
            </div>
        </a>    
    </nav>
    <div id="main-info">
        <div id="selector"></div>
        <div id="panel">
            <p id="teste">Hello world!</p>
        </div>
    </div>

无法使用 $(this) 按 ID 获取元素

Not being able to grab element by ID using $(this)

javascript

jquery

this

jquery-animate