Как написать простую функцию?

Как вы создаете функцию в jQuery, вызываете ее и передаете ей переменную? Здесь он находится в стиле Javascript:

<script type="text/javascript">
function popup(msg) {
  alert(msg);
}
</script>

Затем вы просто включаете событие в HTML:

<html>
<input type="submit" onclick="popup('My Message')" />
</html>

Что такое эквивалент jQuery для этого? Из всех учебников "новичков" все они являются статическими функциями, которые не принимают переменные. Например:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('button').click(function() {
    alert('hello, world');
   });
});
</script>

Я хочу иметь возможность динамически включать разные сообщения. Приведенный выше код затрагивает все кнопки и выплескивает одно и то же сообщение "hello, world".

Ответы

Ответ 1

Если вы хотите, чтобы сообщение было динамическим, вы захотите использовать data-attributes:

<input class='message-button-' type="submit" data-message="My Message" />

Затем в отдельном файле javascript:

// equivalent of $(document).ready(function(){...
$(function(){

  // Functionality starts here
  $('.message-button').on('click', function(e){
    alert($(this).data('message'));
  })


});

Теперь функция будет выполняться в любое время, когда нажата кнопка с классом .message-button, и она будет использовать сообщение данных пользовательского атрибута для отображения сообщения.

Надеюсь, это поможет!:)

Update:

Обратите внимание, что он считает, что лучше всего делать javascript ненавязчиво. Некоторые люди упомянули, что все еще используют атрибут onclick, как вы делали в вашем примере, не делайте этого. Привяжите событие, как показано здесь, используя метод jquery .on('click', function(){}).

Если ваш элемент click является тегом привязки <a>, вы можете предотвратить выполнение href, если хотите, используя e.preventDefault:

$('a').on('click', function(e){
  e.preventDefault()
})

Также, если вам нужно знать, $('.message-button') использует селектор css для захвата элементов dom. Любой действующий селектор CSS, как правило, работает там.

Шаг за шагом

Во-первых, нам нужно перенести весь наш код в функцию, предоставляемую jQuery, которая ждет, пока документ не будет готов обрабатывать действия javascript и манипуляции с dom. Версия с длинным форматом $(document).ready(function(){ /* CODE GOES HERE */ }), но используемая вами версия - это ярлык $(function({ /* CODE GOES HERE */ }):

$(function(){
})

Затем нам нужно привязать событие к нашей кнопке. Поскольку мы дали ему класс .message-button, мы можем использовать jQuery для захвата этого элемента и привязки к нему события 'click':

$(function(){
  // Functionality starts here
  $('.message-button').on('click', function(e){
    // Code here executes when the input button is clicked
  })


});

Внутри обработчиков событий this переопределяется непосредственно к элементу HTML, вызвавшему событие. Обертка в $() дает нам доступ к jquery-методам. Таким образом: $(this) используется очень часто. jQuery дает нам метод .data() для доступа к любым методам data-* в элементе и дает нам значение, что делает alert().

$(function(){
  // Functionality starts here
  $('.message-button').on('click', function(e){
    alert($(this).data('message'));
  })


});

Ответ 2

Это мой лучший способ сделать это, как javascript:

---- Сделать функцию, используя jQuery, как это

<script>$(document).ready(function(){
    popup=function(msg){
      alert(msg);
    }});
</script>

И вам не нужно менять код в теле

<html>
<input type="submit" onclick="popup('My Message')" />
</html>

Вот пример http://jsfiddle.net/PLnF3/

---- Но подождите, если вам просто нужно показать сообщение с предупреждением, возможно, этот образец является лучшим:

<html>
<input type="submit" onclick="alert('My Message')" />
</html>

Для этого вам не нужен javascript или jQuery, просто используйте alert ( "Мое сообщение" ) на вашей кнопке. Пример http://jsfiddle.net/PLnF3/1/

---- Если вы хотите улучшить внешний вид с помощью jQuery, вы можете использовать jQuery Dialog().

Вот пример http://howto.software-mirrors.com/2013/09/how-to-make-jquery-popup-window.html Это код:

<script>
    $(document).ready(function() {
        popup = function(msg) {
            $("<div>" + msg + "</div>").dialog();
        }
    });
</script>

И вам не нужно менять код html на вашем теле.

<html>
<input type="submit" onclick="popup('My Message')" />
</html>

Вот пример http://jsfiddle.net/PLnF3/2/

Помните, чтобы иметь возможность использовать диалог jQuery, вам нужны jquery.js, jquery-ui.js, а также jquery.css тема. подробнее http://howto.software-mirrors.com/2013/09/how-to-make-jquery-popup-window.html

Ответ 3

Вы должны дать каждой кнопке другой идентификатор, например:

<input type="submit" id="submit-something" onclick="popup('My Message')" />

Тогда:

$(document).ready(function() {
    $('#submit-something').click(function() {
        alert('My message');
    });
});

Кроме того, если задача очень повторяющаяся, вы можете использовать другую функцию для создания функции:

function messageHandler(message) {
    return function() {
        alert(message);
    };
}

$(document).ready(function() {
    $('#submit-something').click(messageHandler('My message'));
});

Ответ 4

Вы должны сохранить сообщение в атрибуте data-*:

<button data-message="Hi there!">...</button>

$('button').click(function() {
    alert($(this).data('message'));
});

Ответ 5

$(document).ready(function() {
    var message = "foo"; // You might need to move it to the global scope,
                         // denepends on what you want to do with it.
  $('button').click(function() {
    alert(message);
   });
   ...
   ...
   message = "hello world";
});

Стоит сказать sbout:

Как создать функцию в jQuery

Нет такой вещи, создайте функцию в jQuery.

Ответ 6

Если вам абсолютно необходимо хранить данные в HTML-коде, атрибуты данных являются хорошим выбором:

<button class="alert" data-msg="My Message">Click me</button>

JavaScript:

$(document).ready(function() {
  $('button.alert').click(function() {
      var msg = $(this).data('msg');  // access HTML attribute data-msg
      alert(msg);
  });
});

Ответ 7

Одно решение: использовать атрибуты, такие как параметр.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('button').click(function() {
    alert($(this).attr("message"));
   });
});
</script>
<button message="personal message 1">Botton 1</button>
<button message="personal message 1">Botton 2</button>

Ответ 8

Я пробовал некоторые из предложений, и он отлично работает.

- кнопка html

<input type="submit" value="Submit 1" class="message" data-message="Sample Message 1"/>
<input type="submit" value="Submit 2" class="message" data-message="Sample Message 2"/>

- jquery при нажатии кнопки

$('.message').live('click', function(){
      alert($(this).data('message'));
});