檢查使用jquery點擊哪個類的有效方法

我想知道完成以下操作的最高效和最佳實踐。這種情況很簡單：如果您單擊前導鏈接減少pagenum或增量，如果您單擊下一個鏈接。然後將其發送到一個函數及其父數據。檢查使用jquery點擊哪個類的有效方法

我知道如何做這兩個不同的功能，但我想要一個簡單，快速的方法。

HTML：

<div> 
     hello world 
    <a class="prevpg>Previous</a> 
    <a class="nextpg">Next</a> 
    </div>

的javascript：

$(document).on('click', '.prevpg, .nextpg', function(){ 
    var element = $(this).parent('div').text(); 
// if ,prevpg was clicked 
     somefunction(pagenum--, element) 
// else if .nextpg clicked 
     somefunction(pagenum++,element) 
    }) 



function somefunction(pagenum, data){ 
    var test = true; 
    if(data == 'hello world'){ 
    test = false; } 
    $.ajax({ 
     url: 'search', 
     type: 'GET', 
     data: {'pagenumber':pagenum, testdata: test} , 
     dataType: 'json', 
     success: function(res){ 
      $('body').append(res.data); 
    } 
    }); 
    }

來源

2014-02-12 ravi

錯誤的第6行，你的意思是'element' not'elment'。 – rvighne

在jQuery選擇器中輸入錯字，你的意思是'.nextpg'而不是'nextpg'。 –

sry爲錯別字！ – ravi

嘗試這樣的：

$(document).on('click', '.prevpg, .nextpg', function(){ 
    var element = $(this).parent('div').text(); 
     // When prevpg was clicked 
     if($(this).hasClass("prevpg")){ 
     somefunction(pagenum--, element) 
     } 
    else{ 
     // When nextpg was clicked 
     somefunction(pagenum++,element) 
     } 
    })

來源

2014-02-12 04:36:21

在這段代碼中，有錯字：

<div id="results"> 
    hello world 
<a class=".prevpg">Previous</a> 
<a class=".nextpg">Next</a>

它糾正到：

<a class="prevpg">Previous</a> //remove "." for class names

現在你可以知道被點擊的類使用實際的問題：

$(this).hasClass("prevpg");

利用switch或else if階梯，如果你要調用相應的功能超過2個條件來檢查。對於你的代碼，只有2個case if else會這樣做。

$(document).on('click', '.prevpg, .nextpg', function(){ 
var element = $(this).parent('div').text(); 
if($(this).hasClass("prevpg")) 
    somefunction(pagenum--, element) 
else 
    somefunction(pagenum++,element) 
});

來源

2014-02-12 04:38:39 MrNobody

你的html/code有幾個問題，我已經清理它們並添加了答案。

我還以爲你打算獲得價值"hello world"，而不是"hello world Previous Next"

HTML

<div id="results"> 
    hello world 
    <a class="prevpg">Previous</a> 
    <a class="nextpg">Next</a> 
</div>

pagenum = 0; 

$(document).on('click', '.prevpg, .nextpg', function() { 
    var element = $(this).parent('div').contents().first().text(); 
    if ($(this).hasClass('prevpg')) { 
     pagenum--; 
     somefunction(element); 
    } 
    else if ($(this).hasClass('nextpg')) { 
     pagenum++; 
     somefunction(element); 
    } 
}); 

function somefunction(data) { 
    var test = !(data == 'hello world'); 
    $.ajax({ 
     url: 'search', 
     type: 'GET', 
     data: { 
      'pagenumber': pagenum, 
      testdata: test 
     }, 
     dataType: 'json', 
     success: function(res) { 
      $('body').append(res.data); 
     } 
    }); 
}

來源

2014-02-12 04:39:56

感謝@薩繆爾爲您的答案，這是接近我想要做的一個好方法？ – ravi

你想做什麼？例如，您不包含** somefunction（）**，並解釋它的作用。 –

我編輯了這個問題。只是試圖讓一個Ajax調用 – ravi

考慮這個例子與內嵌的onclick事件證明。

HTML

<div> 
    hello world 
    <a class="prevpg" onClick="someFunction('prev', this)">Previous</a> 
    <a class="nextpg" onClick="someFunction('next', this)">Next</a> 
</div>

function somefunction(action, el) { 

    if(action == 'prev') pagenum--; 
    else pagenum++; 

    var data = $(el).parent('div').text(); 

    // AJAX call 
}

編輯（僅JS解決方案）

$('.prevpg, .nextpg').on('click', function(){ 

    if($(this).attr('class') == 'prevpg') pagenum--; 
    else pagenum++; 

    var data = $(this).parent('div').text(); 

    // AJAX call 
    // If you need some function call it like this 
    // someFunction(pagenum, data); 
});

來源

2014-02-12 05:21:46

不使用內聯JavaScript，因爲不同瀏覽器中的行爲不同。 –

謝謝你的答案@Script溼婆。很不幸，對我的情況來說，html是動態的（由javascript製作），所以它不會工作。 – ravi

@FUserThrowError你能解釋一下嗎？在任何瀏覽器中，我都沒有發現任何簡單的onClick的區別。他們都工作一樣。 –

我認爲它可以b Ë可能與此（使用數據屬性）進行

<div> 
    hello world 
    <a class="control" data-move="-1">Previous</a> 
    <a class="control" data-move="+1">Next</a> 
</div>

和JS

$(".control").on("click", function(e){ 
    var t_number = parseInt($(this).attr("data-move")), 
     element = $(this).parent('div').text(); 

    someFunction(total + t_number, $(this)); 
    return false; 
});

如果事件綁定到文檔中使用的命名空間。

$(document).on("click.HANDLE_CLICK_LINK", .....);

來源

2014-02-12 05:24:24

檢查使用jquery點擊哪個類的有效方法

回答

相關問題