どの要素がクリックされたかを示すオブジェクトを返します

-2

EDIT私はクロージャと機能を使用する事が重要です。 gatherData()とvoteSection()どの要素がクリックされたかを示すオブジェクトを返します

submitButtonと呼ばれる部門をクリックしたいと思います。ユーザーが何をしているか教えてください。私は3つのセクションを持っています。投票セクション、レビューセクション、および別のタイプの投票セクション。要は、今、私は最初の投票セクションを設定しようとしています。 submitButtonをクリックすると、{vote:down}または{vote:up}のようなオブジェクトが表示されます。投票セクションには2つのボタンしかありません。

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

に電話をするのを忘れた実現任意のヘルプ

EDIT いただきありがとうございます。それは空のオブジェクトを

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

クリックイベントは、クリックされた要素を知り、すべてのイベントハンドラが渡されるイベントオブジェクトに直接埋め込まれます。それを超えて、あなたは質問をしましたか？このサイトは、あなたの予定リストをダンプする場所ではなく、質問のためのサイトです。 –

私は問題をすべて一緒に提出ボタンでオブジェクトを返すために束縛している。 –

投票ボタンを押したときに更新される変数が必要です。それでは、提出するときにそれを得ることができます –

を返す==更新バージョン2 ==閉鎖例

ここで、現在の状態を取得するために呼び出すことができる関数を返すクロージャを使用する第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

私はあなたが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"に設定されます。これはすべてのフィールドに適用できます。 "my-voting-button"クラスを他のボタンに追加するだけで、クラス名をユースケースに合わせて変更することができます。ここで

が状態オブジェクトを更新する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でそのオブジェクトをsumbitすることができます。私の例では、それを文字列化してページに書き出します。以下は

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

出典

2016-07-25 15:09:35

私の実装でこれが機能するかどうかを確認する必要があります。私は、すべての異なるセクションからすべてのデータを取得できることを確認したいと思います。送信ボタンをクリックすると、そのデータを含むajaxリクエストが送信されます。私のコードでは、 'voteSection'を使い、別のセクションがあります。私はあなたの答えでそれをすることができるかどうかを見ます。 –

投票集に投票セクションとレビューセクションと範囲セクションがあるので、それは私が望むものではありません。あなたはそれらを一緒に結びつけていることを実証していませんでした。私は、コードを分離し、デカップリングし、そのようなものにしたいと思っています。ご協力いただきありがとうございます。 –

これを実現するために私の答えを広げることができるはずです。あなたのコードにもっと多くのコードを投稿していれば、私の例を拡張してみましょう。私の見解では、これを行うには「どうすればよい」という質問に答えました。ソリューションから学んだことを問題に適用するだけです。 –

あなたは以前のHTMLドキュメントを与えられた投票値を取得するには、このような何か三つのボタンと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>

可能性があります。

出典

2016-07-25 15:30:58

この質問のポイントは、オブジェクトを設定して取得する方法ではありませんでした。オブジェクトを異なるクロージャで渡すことでより多くのことを行う必要がありました。私は、ユーザーが入力するさまざまなセクションのコードをさまざまなセクションに編成したいと思っていました。あなたのコードは、 "スパゲッティコード"であり、それが私が望むものではない文書準備機能のすべてを示しています。 –

あなたはあなたの質問を編集して、あなたが意味するものを正確に言うことを考えるべきです –

どの要素がクリックされたかを示すオブジェクトを返します

答えて

関連する問題