Question

我在javascript中创建了一个函数，我希望当用户点击下一个按钮时，它会从之前的值更改div并在此处包含新值是我的代码：

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
    <div id="previous" style="float:left; width:20px;">
        <a href="javascript:void(0)">
            </a>
    </div>
    <div id="next" style="float:left; width:20px;">
            <a href="javascript:void(0)" onClick="getBusinesses(2)">></a>
    </div>
</div>

这是我的javascript函数：

function getBusinesses(page) {
    $.ajax({
        type: "POST",
        url: "getbusiness.php",
        data: "page=" + page,
        success: function (msg) {
            $("#new2").ajaxComplete(function (event, request, settings) {
                $("#new2").html(msg);
            });
        }
    });
}

我希望当用户点击id = next然后递增值并更改

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
    <div id="previous" style="float:left; width:20px;">
        <a href="javascript:void(0)" onClick="getBusinesses(1)">
            <</a>
    </div>
    <div id="next" style="float:left; width:20px;">
        <a href="javascript:void(0)" onClick="getBusinesses(3)">></a>
    </div>
</div>

等等

Answer 1

使用全局变量并传递它。

<script>var pageNumber = 0;</script>

然后是下一个

... onclick="getBusinesses(++pageNumber);" //or: pageNumber++; getBusinesses(pageNumber);

然后是prev

... onclick="getBusinesses(--pageNumber);" //or: pageNumber--; getBusinesses(pageNumber);

这是因为你必须每次都生成onclick的代码，否则，实际上，这就是我做的（但是更糟糕且不太安全的方法）。

Answer 2

您应该按照建议使用全局计数器，但只能在完成ajax之后使用。也许最好将数字存储在链接本身中。

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
<div id="previous" style="float:left; width:20px;">
    <a href="javascript:void(0)" data-id="2">
        <</a>
</div>
<div id="next" style="float:left; width:20px;">
        <a href="javascript:void(0)" onClick="getBusinesses(2)" data-id="0">></a>
</div>

        function  getBusinesses() {            
            var currentLink = $(this);
            var currentBusiness = currentLink.attr('data-id');
            $.ajax
            ({
                type: "POST",
                url: "getbusiness.php",
                data: "page="+currentBusiness,
                success: function(msg)
                {
                    $("#new2").ajaxComplete(function(event, request, settings)
                    {
                        $("#new2").html(msg);
                        $("#next").attr('data-id', currentBusiness + 1);
                        $("#previous").attr('data-id', currentBusiness -1);
                    });
                }
            });
        }

希望这个想法很明确

Answer 3

您需要跟踪“某个地方”的页码。在函数调用中对其进行硬编码是最糟糕的地方 - 除非你在每次调用时都提供新代码，否则它几乎不可能改变（不是不可能，但可能不是你想到的）。

我会创建getBusinesses函数的“属性”（这是在javascript中制作“静态变量”的技巧）。这个属性，我们称之为currentBusiness，将以某个默认值开始。现在，您使用up或down参数调用您的函数（-1或+1可能效果最佳）;您递增/递减属性，并调用该函数。它现在可以返回正确的结果：

getBusinesses.page = 1;  // do this once, when the page first loads

将您的功能更改为：

function  getBusinesses(updown){                  
   getBusinesses.page += updown;
   if (getBusinesses.page < 0) {
      // do what you need to do if values are out of range
   }
   $.ajax
   ({
      type: "POST",
      url: "getbusiness.php",
      data: "page="+getBusinesses.page,
      success: function(msg)
      {
         $("#new2").ajaxComplete(function(event, request, settings)
         {
            $("#new2").html(msg);
         });
       }
    });

您的按钮现在分别调用getBusinesses(-1);和getBusiness(1);。这可以使您的代码保持清洁，可读和可维护。

Answer 4

HTML

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
    <div class="navContainer">
        <a class="nav" id="navP" data-go="minus">&lt;</a>
        <a class="nav" id="navN" data-go="plus">&gt;</a>
    </div>
</div>

CSS

.navContainer {
}
a.nav {
    cursor:pointer;
    border: 1px solid whitesmoke;
    padding: .2em;
    margin: .2em;
    float: left; 

}

JS

$( document ).ready(function() { // Handler for .ready() called.
var intPage = 0; // variable for initial page number

// trigger for next/prev

$( "a[class=nav]" ).click(function( e ) {

    switch($( this ).attr("data-go"))
    {
    case "minus": 
           if (intPage >=1) intPage--;
            getBusinesses(intPage);       
      break;
    default:
            intPage++;
            getBusinesses(intPage);
    }
    console.log(intPage);
});

function getBusinesses(page) {
    $.ajax({
        type: "POST",
        url: "getbusiness.php",
        data: "page=" + page,
        success: function (msg) {
            $("#new2").ajaxComplete(function (event, request, settings) {
                $("#new2").html(msg);
            });
        }
    });
}

});

小提琴： http://jsfiddle.net/Olavxxx/n96M2/

如何在javascript中增加函数值？

4 个答案: