如何显示用于测试的 jQuery 变量的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19382128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I display the value of a jQuery variable for testing?
提问by forrest
I am working on a slider that uses jQuery. Some elements of the slider are working correctly, but there is a problem that I am trying to troubleshoot with some of the code. To test it I would like to be able to display the values of the variables in the statement.
我正在研究使用 jQuery 的滑块。滑块的某些元素可以正常工作，但是我正在尝试使用某些代码进行故障排除。为了测试它，我希望能够在语句中显示变量的值。
Here is the code block I am working with:
这是我正在使用的代码块：
$('.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);
});
I added a div called 'test' where I would like to display the values of the variables to make sure they are returning expected results:
我添加了一个名为“test”的 div，我想在其中显示变量的值以确保它们返回预期结果：
<div class="test"><p>The value is: <span></span></p></div>
For example, to test the values, I inserted this into the statement above:
例如，为了测试这些值，我将其插入到上面的语句中：
$('.test span').append(marqueeWidth);
However, I don't get any results. What is the correct way to include a test inside that code block to make sure I am getting the expected results?
但是，我没有得到任何结果。在该代码块中包含测试以确保获得预期结果的正确方法是什么？
Thanks.
谢谢。
回答by James Donnelly
Just use JavaScript's consolefunctionsto log your variables within your browser's console.
只需使用JavaScript 的console函数在浏览器的控制台中记录变量。
var myVar = 123;
console.log(myVar, "Hello, world!");
If you're unsure how to open the console within your browser, see: https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers
如果您不确定如何在浏览器中打开控制台，请参阅：https: //webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers
回答by jbabey
appendis used to append either an HTML string, a DOM element, an array of DOM elements, or a jQuery element. Since you are just trying to show a number (marqueeWidth), you probably want to set the textof the span instead:
append用于附加 HTML 字符串、DOM 元素、DOM 元素数组或 jQuery 元素。由于您只是想显示一个数字 ( marqueeWidth)，因此您可能希望改为设置text跨度的 ：
$('.test span').text(marqueeWidth);
Also, is there a particular reason why you don't just use the console? It may be worth reading over a Debugging JavaScriptwalkthrough.
另外，您不只是使用控制台有什么特别的原因吗？可能值得阅读Debugging JavaScript演练。
回答by sudhAnsu63
you can use the following.
您可以使用以下内容。
$('.test span').html(marqueeWidth);
However doing a console.log(yourvariable);or alert(yourvariable);is better.
然而，做一个console.log(yourvariable);或alert(yourvariable);更好。
