Question

编辑我使用闭包和功能的事实很重要。比如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())
})

感谢您的帮助

EDIT 我意识到我忘了拨打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())
})

Answer 1

==更新版本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())) ;
});

====版本1

我汇总了一个代码笔，以帮助您在达到sumbit之前管理这些部分的状态。看看吧。

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"。这可以应用于您的所有字段。您只需添加＆＃34; my-voting-button＆＃34; class to other按钮（也许可以将类重命名为更适合您用例的内容）。

以下是更新状态对象的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)) ;
});

Answer 2

下面是三个按钮和一个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 doc给出的投票价值。

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

   });

  });

返回一个对象，显示单击了哪个元素

2 个答案: