无法使用 $(this) 通过 ID 获取元素答案

【问题标题】：Not being able to grab element by ID using $(this)无法使用 $(this) 通过 ID 获取元素
【发布时间】：2015-07-30 13:39:29
【问题描述】：

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

$(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'});
}

警报为 ID 输出“未定义”。我想要做的是获取我单击的任何元素的 ID，然后与 switch 语句中的案例进行比较，以定义我的站点中的箭头应该走多远。我点击的所有元素都有一个 ID，所以它没有给我“未定义”，因为我点击的是一个没有 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>

【问题讨论】：

$(this).click 在哪里被设置/调用？我们需要看看那个代码！
为什么不将setArroPos 中的所有内容直接移动到click 事件中？
确实，点击设置器中的$(this) 来自哪里？很容易得出该元素没有设置 id 的结论。
它被称为文件准备好了，这里是代码：$(document).ready(function () { $(this).click(function(){ setArroPos($(this)); }); });
因为你只是给窗口添加了一个点击处理程序，而窗口没有id。

标签： javascript jquery jquery-animate this

【解决方案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>

【讨论】：

感谢 Mouser，您是对的......现在它正在工作:)
很高兴为您服务。