怎么写一个简单的函数？

时间：2012-06-14 22:46:59

标签： javascript jquery

如何在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”的相同消息。

9 个答案:

答案 0 :(得分：16)

如果您希望消息是动态的，那么您将要使用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的按钮，该函数就会执行，并且它将使用自定义属性数据消息来显示消息。

希望这有帮助！ ：）

更新

请注意，最好的做法是不加思索地执行javascript。有人提到仍然像你在你的例子中那样使用onclick属性，不要这样做。像我在这里使用jquery的.on('click', function(){})方法一样绑定事件。

如果您的点击项是锚标记<a>，那么您可以使用e.preventDefault阻止href被关注：

$('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'));
  })


});

答案 1 :(得分：6)

这是我最好的方法，就像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

了解更多信息

答案 2 :(得分：4)

您可以为每个按钮指定不同的ID，如下所示：

<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'));
});

答案 3 :(得分：3)

您应该将消息存储在data-*属性中：

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

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

答案 4 :(得分：2)

$(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";
});

值得一说：

如何在jQuery中创建函数

没有这样的东西，在jQuery中创建一个函数。

答案 5 :(得分：1)

如果您绝对需要将数据存储在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);
  });
});

答案 6 :(得分：0)

一种解决方案：使用参数等属性。

<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>

答案 7 :(得分：0)

我已经尝试了一些建议并且效果很好..

- 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'));
});

答案 8 :(得分：0)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>POS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>


function getUnitPrice(){
        var item = document.getElementById('item').value;
        if(item==0){
            document.getElementById('unitprice').value = "36000.00";
        }
        if(item==1){
            document.getElementById('unitprice').value = "2500.00";
        }
        if(item==2){
            document.getElementById('unitprice').value = '14000.00';
        }
        if(item==3){
            document.getElementById('unitprice').value = '40000.00';
        }
        if (item==" "){
            document.getElementById('unitprice').value = '0';
        }


}

function calcSubtotal(){
    var qty = document.getElementById('quantity').value;
    var price = document.getElementById('unitprice').value;
    if(isNaN(qty)||isNaN(price)){
        alert("Please enter valid values");

    }
    else{
        var subtotal= eval(price) * eval(qty);
        document.getElementById('subtotal').value = subtotal;
    }




}


function calcDiscount(){

    var discRate = document.getElementById('discountRate').value;
    var discAmount = document.getElementById('subtotal').value;

    if(isNaN(discRate)||isNaN(discAmount)){
        alert("Please enter valid discount");
        return;
    }
    if(discRate < 5 || discRate > 20 ){
        alert("Please enter valid discount");
        return;
    }

    var discount = eval(discAmount) * eval(discRate)/100;
    document.getElementById('discountAmount').value = discount;
    document.getElementById('total').value= discAmount - discount;



}

function calcBalance(){

    var cash = document.getElementById('cash').value;
    var total = document.getElementById('total').value;

    if(isNaN(cash)){
        alert("Enter valid amount");
        return;
    }

    var bal = eval(total) - eval(cash);
    document.getElementById('balance').value = bal;



}

</script>

</head>

<body class="container">
    <div class="panel panel-primary" style="margin-top: 10px;">
        <div class="panel-heading">
            <p style="font-size: 36px; margin: 0;"><strong>Kumara Super Centre</strong></p>
            <p style="font-size: 16px; margin: 0;">No. 300, Ja-ela Road, Gampaha. Tel: 033-2232526</p>
        </div>
        <div class="panel-body">
        <table class="table table-hover">
            <tr>
                <th class="text-center">Item</th>
                <th class="text-center">Quantity</th>
                <th class="text-center">Unit Price</th>
                <th class="text-center">Amount</th>
            </tr>
            <tr>
                <td class="col-lg-5">
                    <select class="form-control" id="item" required onChange="getUnitPrice()">
                        <option value="">Select one</option>
                        <option value="0">Television</option>
                        <option value="1">FM Radio</option>
                        <option value="2">DVD Player</option>
                        <option value="3">Surround System</option>
                    </select>
                </td>
                <td class="col-lg-2">
                    <input class="form-control" type="number" value="0" id="quantity" name="quantity" required onKeyUp="calcSubtotal()" />
                </td>
                <td class="col-lg-2">
                    <input class="form-control" type="number" value="0" id="unitprice" name="unitprice" readonly />
                </td>
                <td class="col-lg-3">
                    <input class="form-control" type="number" value="0" id="subtotal" name="subtotal" readonly />
                </td>
            </tr>
        </table>
        <table class="table" style="float: right; width: 600px;">
            <tr style="border:none">
                <td class="text-center col-lg-3"><strong>Discount Rate (%)</strong></td>
                <td class="col-lg-2"><input class="form-control" type="number" value="0" id="discountRate" name="discountRate" onKeyUp="calcDiscount()" /></td>
                <td class="col-lg-3"><input class="form-control" type="number" value="0" id="discountAmount" name="discountAmount" readonly /></td>
            </tr>
            <tr style="border-top:none">
                <td class="text-center"><strong>Total</strong></td>
                <td></td>
                <td><input class="form-control" type="number" value="0" id="total" name="total" readonly /></td>
            </tr>
            <tr style="border:none">
                <td class="text-center"><strong>Cash</strong></td>
                <td></td>
                <td><input class="form-control" type="number" value="0" id="cash" name="cash" onKeyUp="calcBalance()" /></td>
            </tr>
            <tr style="border:none">
                <td class="text-center"><strong>Balance</strong></td>
                <td></td>
                <td><input class="form-control" type="number" value="0" id="balance"  name="balance" readonly /></td>
            </tr>
        </table>

        </div>



    </div>
</body>
</html>
相关问题
最新问题