如何显示jQuery变量的值以进行测试？

Question

我正在使用一个使用jQuery的滑块。滑块的某些元素正常工作，但有一个问题，我正在尝试使用某些代码进行故障排除。为了测试它，我希望能够在语句中显示变量的值。

以下是我正在使用的代码块：

$('.marquee_nav a.marquee_nav_item').click(function(){
        $('.marquee_nav a.marquee_nav_item').removeClass('selected');
        $(this).addClass('selected');

        var navClicked = $(this).index();
        var marqueeWidth = $('.marquee_container').width();
        var distanceToMove = marqueeWidth * (-1);
        var newPhotoPosition = (navClicked * distanceToMove) + 'px';
        var newCaption = $('.marquee_panel_caption').get(navClicked); 

        $(' .marquee_photos').animate({left: newPhotoPosition}, 1000);
        });

我添加了一个名为＆＃39; test＆＃39;我想在哪里显示变量的值，以确保它们返回预期的结果：

<div class="test"><p>The value is: <span></span></p></div>

例如，为了测试这些值，我将其插入上面的语句中：

$('.test span').append(marqueeWidth);

但是，我没有得到任何结果。在该代码块中包含测试以确保获得预期结果的正确方法是什么？

感谢。

Answer 1

只需使用JavaScript's console functions在浏览器控制台中记录变量即可。

var myVar = 123;
console.log(myVar, "Hello, world!");

如果您不确定如何在浏览器中打开控制台，请参阅：https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers

Answer 2

append用于附加HTML字符串，DOM元素，DOM元素数组或jQuery元素。由于您只是想显示一个数字（marqueeWidth），因此您可能希望设置范围的text：

$('.test span').text(marqueeWidth);

另外，为什么不使用控制台有特殊原因？可能值得阅读Debugging JavaScript演练。

Answer 3

您可以使用以下内容。

$('.test span').html(marqueeWidth);

但是，console.log(yourvariable);或alert(yourvariable);更好。