返回顯示哪個元素被點擊的對象

-2

編輯我使用閉包和函數的事實很重要。像gatherData()和voteSection()返回顯示哪個元素被點擊的對象

我想點擊一個名爲submitButton的div，這應該告訴我用戶做了什麼。我有3個部分。投票部分，評論部分和另一種投票部分。關鍵是現在我正在嘗試設立第一個投票部分。當我點擊submitButton時，我應該看到一個看起來像{vote:down}或{vote:up}的對象。我在投票部分只有兩個按鈕。

function gatherData(){ 
    var submitButton = ".submitButton"; 
    var result = {} 
    function voteSection(){ 
     $(".upButton").click(function(){ 
      // result.vote = "up" 
      // console.log(result) ; 
      $(this).data("clicked", true); 
      $(this).siblings(".downButton").data("clicked",false) 
     }) 
     $(".downButton").click(function(){ 
      $(this).data("clicked", true); 
      $(this).siblings(".upButton").data("clicked",false) 
      // result.vote = "down"; 
      // console.log(result) ; 
     }) 
    // return result; 
    } 
    $(submitButton).on("click",function(){ 
     if($(".upButton").data("clicked")){ 
      result.vote = "up" 
     }else if($(".downButton").data("clicked")){ 
      result.vote = "down"; 
     } 
    }) 
    return result; 
} 
$(".submitButton").on("click",function(){ 
    console.log(gatherData()) 
})

感謝所有幫助

編輯我才意識到自己忘了打電話給voteSection

這就是我現在有。它返回一個空對象

function gatherData(){ 
    var submitButton = ".submitButton"; 
    var result = {} 
    function voteSection(){ 
     $(".upButton").click(function(){ 
      // result.vote = "up" 
      // console.log(result) ; 
      $(this).data("clicked", true); 
      $(this).siblings(".downButton").data("clicked",false) 
     }) 
     $(".downButton").click(function(){ 
      $(this).data("clicked", true); 
      $(this).siblings(".upButton").data("clicked",false) 
      // result.vote = "down"; 
      // console.log(result) ; 
     }) 
     if($(".upButton").data("clicked")){ 
      result.vote = "up" 
     }else if($(".downButton").data("clicked")){ 
      result.vote = "down"; 
     } 
     // }) 
     return result; 
    // return result; 
    } 
    return voteSection() 
    // $(submitButton).on("click",function(){ 

} 
$(".submitButton").on("click",function(){ 
    console.log(gatherData()) 
})

來源

2016-07-25 jack blank

點擊事件知道哪個元素被點擊，並且直接嵌入事件對象中，每個事件處理器都被傳遞。除此之外，你有問題嗎？這個網站是爲了問題，而不是一個地方轉儲你的待辦事項列表。 –

我遇到了問題，將所有內容綁在一起以在提交按鈕上返回對象。 –

你應該有一個變量，當按下投票向上或向下按鈕時得到更新。然後，您可以在需要時提交 –

== UPDATE VERSION 2 ==閉合例子

下面是一個使用一個封閉件，它返回一個可以被調用以獲得當前的狀態函數的第二版本。

http://codepen.io/anon/pen/xOjaJL

通知事件處理程序僅綁定到每個呼叫voteGatherer（）的DOM 1時，調用voteGatherer的（）的結果是，當你需要的票的狀態，你可以調用一個函數。

function voteGatherer() 
{ 
    var state = { 'vote': null }; // no vote selection made 

    $(".my-voting-button").click(function(ev) 
    { 
    var target = $(ev.target); 
    state[target.data("action")] = target.data("value"); 
    }); 


    return function() 
    { 
    return state; 
    } 
} 

var gatherer1GetState = voteGatherer(); 

$(".my-submit-button").click(function(ev) 
          { 
    $("#stateString").html(JSON.stringify(gatherer1GetState())) ; 
});

==== VERSION 1

我扔在一起的代碼筆，以幫助您在這些部分管理國家你打透過前。一探究竟。

http://codepen.io/anon/pen/bZrxRk

<button data-value="up" data-action="vote" class="btn btn-primary my-voting-button">Vote Up</button> 
<button data-value="down" data-action="vote" class="btn btn-warning my-voting-button">Vote Down</button>

通知按扭歸因具有動作和值時的狀態對象上被更新。

所以，當你點擊投票向上按鈕，state["vote"]值設置爲"up"。這可以應用於您的所有領域。您可以將「我的投票按鈕」類添加到其他按鈕（也可以將該類重命名爲更適合您的用例的東西）。

這裏是更新狀態對象的JavaScript：

var state = { 'vote': null }; // no vote selection made 

$(".my-voting-button").click(function(ev) 
{ 
    var target = $(ev.target); 
    state[target.data("action")] = target.data("value"); 
});

現在你有一個狀態對象，它是完全填充，你可以透過該對象使用Ajax回您的服務器。在我的例子中，我將它串化並寫在頁面上。

$(".my-submit-button").click(function(ev) 
{ 
    $("#stateString").html(JSON.stringify(state)) ; 
});

來源

2016-07-25 15:09:35

感謝關閉示例。我將不得不查看這是否適用於我的實現。我想確保我可以從所有不同部分獲取所有數據，並在單擊提交按鈕時發送帶有該數據的ajax請求。在我的代碼中，我使用'voteSection'，然後我有另一節。我會看看如果我可以用你的答案 –

做到這一點，你會發現它不完全是我想要的，因爲在votegather中會有投票部分和評論部分以及範圍部分。你沒有證明將它們綁在一起會更有幫助。我想進入分離，解耦代碼和類似的東西。謝謝你的幫助。 –

你應該能夠擴展我的答案來實現這一點。如果你在你的例子中發佈了更多的代碼，也許我會擴展我的例子。從我的角度來看，我已經回答了「如何」這個問題。您只需將您從解決方案中學到的知識應用於您的問題。 –

下面有三個按鈕和一個div

<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 

<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script> 

<!--<script src="index.js"></script>--> 
<title>repl.it</title> 
</head> 
<body> 

    <button class="upButton">up</button> 
    <button class="downButton">down</button> 
    <button class="submitButton">submit</button> 

    <div id="vote">vote goes here </div> 

</body> 
</html>

你可以像這樣獲得的選票值給出先前的HTML文檔。

$(document).ready(function() { 

    var result = {vote:""} 

    $(".upButton").click(function(){ 
    result.vote = "up"; 

    }); 

    $(".downButton").click(function(){ 
    result.vote = "down"; 

    }); 

    $(".submitButton").click(function(){ 
     $("#vote").html(result.vote); 

    }); 

    });

來源

2016-07-25 15:30:58

這個問題的重點不在於如何設置和檢索對象。它不得不通過不同的關閉來傳遞對象。我想將代碼組織到用戶輸入的不同部分的不同部分。你的代碼顯示了一個文檔就緒函數中的所有內容，即「意大利麪代碼」，這不是我想要的。 –

你應該考慮編輯你的問題來確切地說出你的意思 –

返回顯示哪個元素被點擊的對象

回答

相關問題