Javascript变量使用jquery来查找变量 [英] Javascript variable using jquery to find variable

问题描述

我用按钮制作了小提琴。现在在javascript，我试图学习jquery，通过这样做，我把旧的fiddles转换为jquery从javascript，但我知道如何。

i made a fiddle with buttons. Now in the javascript, I'm trying to learn jquery and by doing so I'm converting old fiddles into jquery from javascript however I know how.

我的问题是，在我的函数调用init，我不知道如何转换JavaScript的方式获取一个html元素的id存储在一个变量。

My problem is that in my function called init, I can't figure out how to convert the javascript way of get an html element with an id stored in a variable.

javascript中的旧代码：

Old code in javascript:

var but = document.getElementById("but");

jQuery中的新代码：

New code in jQuery:

var but = $('#but');

我认为问题是我从一个javascript语句开始，然后使用jQuery。我不知道在jQuery中的变量方面做什么。

I think the problem is that I start with a javascript statement but then use jQuery. I don't know what to do in terms of variables in jQuery.

推荐答案

您需要添加 [0] 到您的jquery代码以获取document元素，但是使用添加事件监听器的jquery方法是没有意义的。我建议 $（'＃but'）。mouseout（etc）或 $（'＃but'）。on（'mouseout'

You need to add in [0] to your jquery code to get the document element, but that is rather pointless with the jquery method of adding event listeners. I would suggest either $('#but').mouseout(etc) or $('#but').on('mouseout', etc).

我已将您的jsfiddle更新为按照预期工作，但我会尝试在这里给出一个简短的tut：

I've updated your jsfiddle to work as expected, though I'll attempt to give a short tut here:

有两种添加事件监听器的方法应该熟悉每个jquery文档; .on（）方法和。（event）（）方法。后面你可以添加到jquery的ojects代替 object。（eventName）（）作为例子，添加点击处理程序到一个对象： object .click（function（）{console.log（'executed'）;}）;

There are two methods of adding event listeners you should familiarize yourself with per the jquery documentation; the .on() method, and the .(event)() method. The latter you can add to jquery ojects in lieu of object.(eventName)() as an example, adding the click handler to an object: object.click(function() { console.log('executed'); });

如果元素是动态添加的，并且事件只在文档准备就绪时添加（ $（document）.ready（function（）{do stuff}）; ）。为了将事件附加到动态添加的元素，我们需要 .on（）方法。

This method however is not 'live' it will not update itself if the elements are added dynamically, and the events are only attached when the document is ready($(document).ready(function() { do stuff });). In order to attach events to dynamically added elements, we need the .on() method.

以下html：

<div class="wrapper">
    <span class="dynamically_added">stuff</span>
</div>

为了将事件监听器附加到动态添加的span，在jquery中添加以下内容：

In order to attach an event listener to the dynamically added span, in your jquery, add the following:

$(".wrapper").on('click', '.dynamically_added', function() {
    console.log('executed');
});

.on（）的第一个参数是事件。您可以通过使用空格分隔多个事件来附加多个事件： .on（'click hover'）。第二个参数是要执行的函数，或者是目标元素。在上述示例的情况下，它是跨度。最后一个参数当然是要执行的函数。据我所知，你需要一个匿名函数来引用函数来执行，而不是简单地写在那里。

The first parameter of .on() is(are) the event(s). You can attach multiple events by delimiting them with spaces: .on('click hover'). The second parameter is either the function to execute, or the targeted element. In the case of the above example it is the span. The last parameter is of course the function to execute. As far as I am aware, you need to have an anonymous function to refer to the function to execute, instead of simply writing it there.

我希望这有帮助。

这篇关于Javascript变量使用jquery来查找变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！