Javascript 返回显示单击了哪个元素的对象_Javascript_Jquery_Design Patterns

Javascript 返回显示单击了哪个元素的对象

javascript jquery design-patterns

Javascript 返回显示单击了哪个元素的对象,javascript,jquery,design-patterns,Javascript,Jquery,Design Patterns,编辑我使用闭包和函数这一事实很重要。像gatherData和voteSection 我想单击一个名为submitButton的div，它应该告诉我用户做了什么。我有三个部分。投票部分、审查部分和其他类型的投票部分。关键是我现在正试图建立第一个投票区。当我点击submitButton时，我会得到一个类似于{vote:down}或{vote:up}的对象。我在投票部分只有两个按钮 function gatherData(){ var submitButton = ".submitButton

编辑我使用闭包和函数这一事实很重要。像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==关闭示例

下面是第二个版本，它使用一个闭包返回一个函数，可以调用该函数来获取当前状态

请注意，每次调用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之前，我创建了一个代码笔来帮助您管理这些部分的状态。看看吧

现在您有了一个完全填充的状态对象，您可以使用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>

单击事件知道单击了哪个元素，它直接嵌入到每个事件处理程序传递的事件对象中。除此之外，你还有问题吗？此网站用于提问，而不是转储待办事项列表的地方。我在将所有内容绑定在一起以返回“提交”按钮上的对象时遇到问题。您应该有一个变量，该变量在按下“投票向上”或“投票向下”按钮时更新。然后，当您需要提交时，您就可以了解到，没有任何东西可以阻止您围绕示例包装闭包，以及这里的人们为您提供的帮助。您仍然可以这样做。尽管您应该知道代码的一个关键问题是，每次单击submitButton时，您都在添加事件处理程序的新副本。因此，第五次单击submit按钮时，upButton和downButton上各有5个事件处理程序。此外，在您第一次单击submit按钮时，您以前在upButton和downButton上没有事件侦听器，因此第一次单击submit将始终有一个空的结果对象。感谢闭包示例。我必须看看这是否适用于我的实现。我想确保我可以从所有不同的部分获取所有数据，当单击submit按钮时，发送一个包含该数据的ajax请求。在我的代码中，我使用voteSection，然后我有另一个部分。我会看看我能否用你的回答做到这一点。你看，这并不完全是我想要的，因为在votegather中会有一个投票区、一个评论区和一个范围区。你没有证明把它们绑在一起会更有帮助。我想学习分离、解耦代码之类的东西。谢谢你的帮助。你应该能够扩展我的答案来实现这一点。如果您在示例中发布更多代码，也许我会扩展我的示例。从我的观点来看，我已经回答了如何做到这一点的问题。你只需要将从解决方案中学到的知识应用到你的问题上。这个问题的重点不是如何设置和检索对象。它必须通过不同的闭包传递对象。我想将代码组织成不同的部分，用于用户输入的不同部分。你的代码在一个准备文档的函数中显示了所有内容，这是意大利面代码，这不是我想要的。你应该考虑编辑你的问题，准确地说出你的意思

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

<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>

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

   });

  });