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

return an object that show which element was clicked

本文关键字：元素 单击 一个对象 显示 返回      更新时间：2023-09-26

EDIT我使用闭包和函数这一事实很重要。如gatherData()和voteSection()

我想单击一个名为submitButton的div，这应该会告诉我用户做了什么。我有三个部分。投票部分、审查部分和其他类型的投票部分。重点是，现在我正试图建立第一个投票区。当我点击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())
})

==更新版本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"。这可以应用于您的所有字段。您可以将"我的投票按钮"类添加到其他按钮中（也可以将该类重命名为更适合您的用例的类）。

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

下面是三个按钮和一个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); 
   });
  });
相关文章：