Question

我不确定为什么，但是当我尝试运行此功能时：

resize

由以下人员定义：

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

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

以下是相关的HTML：

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

Answer 1

也许为了让这个工作你需要改变这个：

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

为：

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

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

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用$（this）无法通过ID获取元素

1 个答案: