Question

在下面的代码中，在注释“PROBLEM LINE”的行上，attr会导致console.log在单击其中一个时打印出“undefined”。我似乎无法弄清楚原因：

test.js

    var html = '';    
    // number of panels in the carousel
    var panelCount = 0;
    // panel that is to the forefront of the carousel
    var currentPanel = 0;

    $(document).ready(function(){

        for (var i=0; i < 5; i++) {
            html += '<div class="team-member" id="' + panelCount + '">' + panelCount + '</div>';
            html += '<div class="reflection" id="' + panelCount + '"></div>';
            panelCount++;
        }
        $('#carousel').html(html);


    $(".container-carousel").on('click', '.team-member', function(e) {
            var target = $(e.currentTarget);
            var targetId = parseInt(target.attr('id'));
            var frontRotation = currentPanel * (360/panelCount);

            $("#" + targetId + ".reflection").css("transform", "rotateY(   " + frontRotation + "deg ) translateZ( 288px ) translateY( 175px ) translateZ( 175px ) rotateX( 90deg )");
            var targetIdString = '' + targetId;

            /* PROBLEM LINE: */
            $("#" + currentPanel + ".reflection").attr('id', targetId);

            console.log($("#" + currentPanel + ".reflection").attr('id'));

            $("#" + targetId + ".reflection").attr('id', currentPanel);
        });




    });

的test.html

<!DOCTYPE html>

<!-- JQuery--> 
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type = "text/javascript" src = "test.js"></script>

<section class="container-carousel">
    <div id="carousel" style="transform: translateZ(-288px) rotateY(-360deg);"></div>
</section>

</html>

任何想法为什么？

Answer 1

这是因为在您更改元素的ID后，您可以通过选择旧ID来尝试记录。

    $("#" + currentPanel + ".reflection").attr('id', targetId);
    /*The id is now targetId*/

    console.log($("#" + currentPanel + ".reflection").attr('id'));
    /*currentPanel will not work because an element with that id no longer exists*/

将console.log更改为

console.log($("#" + targetId + ".reflection").attr('id'));

看到它正常工作here

Answer 2

代码中的主要问题是，您的网页中有重复的ID。所以id选择器总是会获取带有id的第一个元素，尝试应用不匹配的.refelection类选择器，因此你的选择器$("#" + currentPanel + ".reflection")不会返回任何结果。

因此对团队成员和反射元素使用2个不同的id，我认为你可以使用如下所示的1个元素的后缀

for (var i = 0; i < 5; i++) {
    html += '<div class="team-member" id="' + panelCount + '">' + panelCount + '</div>';
    html += '<div class="reflection" id="' + panelCount + '-reflection"></div>';
    panelCount++;
}

然后

$("#" + targetId + "-reflection").css("transform", "rotateY(   " + frontRotation + "deg ) translateZ( 288px ) translateY( 175px ) translateZ( 175px ) rotateX( 90deg )");

Answer 3

从jQuery 1.6开始，.attr（）方法为尚未设置的属性返回undefined。要检索和更改DOM属性（如表单元素的已选中，已选择或已禁用状态），请使用.prop（）方法。

jQuery attr（）失败了

3 个答案: