選択された要素は同じ値であるがidが異なる

IDに応じて異なるパラメータで同じ関数を実行するにはどうすればよいですか？選択された要素は同じ値であるがidが異なる

value="+"の入力ボタンが選択されている場合は、そのIDが何であるかを確認してから、さまざまなパラメータでjavascript関数を呼び出します。例えば

は、id="Add_1"たボタンが選択され、その後、呼び出された関数は、ここgetData(0);

である。ここで、HTML（抽出）

<html> 
<head> 
<link href="../css/coin_convert.css" rel="stylesheet" type="text/css"> 
<script src="coin_convert.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body> 
<div class="form"> 
<form name="coins"> 
<input type="button" value="+" id="Add_1" /> 
<input type="button" value="+" id="Add_2"/> 
<input type="button" value="+" id="Add_3"/> 
<input type="button" value="+" id="Add_4"/> 
</form> 
</div> 


</body> 
</html>

ここではJQuery

$(document).ready(function() { 
    $("[value='+']").on("click", function() { 
     if($("[value='+']").is("Add_1")){ 
     getData(0); 
     } 
    }); 
});

されています呼び出されるJavaScript関数

function getData(n){ 
    var coin = new Array(4); 
    switch (n){ 
     case 0: 
      coin[n]=document.getElementById('coin_dragon').value; 
      break; 
     case 1: 
      coin[n]=document.getElementById('coin_sky').value; 
      break; 
     case 2: 
      coin[n]=document.getElementById('coin_special').value; 
      break; 
     case 3: 
      coin[n]=document.getElementById('coin_legend').value; 
      break;   
    } 
    addition(coin[n]); 

}

多くの感謝！

出典

2017-02-28 IcedLemonTea_

のIDを取得するために.ATTR（ 'ID'）を使用します。

関連したIDを持つ各要素に対して、この実行を持つために、あなたはそのインデックスのオフに基づいてデータをインデックスを使用し、取得するループを実行する必要があります。この中

$(document).ready(function() { 
    $("[value='+']").each(function(index) { 
    $(this).click(function() { 
     if ($(this).attr('id') == 'Add_' + (index + 1)) { 
     getData(index); 
     } 
    }); 
    }); 
});

をたとえば、値が+で、IDがAdd_で始まる要素がクリックされると、getData()がトリガされ、要素のIDの番号よりも1つ少ない値を通過します。 Add_で始まらないIDを持つ要素をクリックすると、getData()がトリガーされません。

私はこのhereを展示している実際のフィドルを作成しました。

希望すると便利です。

出典

2017-02-28 19:14:21

あなたはID属性を検索し.attr('id')を使用する必要がある要素

if($("[value='+']").attr('id')== 'Add_1'){ 
    getData(0); 
}

出典

2017-02-28 19:08:13

あなたはあまりにもたくさんのハンクを –

は、私はあなたが提供したコードに基づいて、いくつかの新しいアイデアを提案することができる：

のgetDataだけクリックされたボタンに応じて、「追加（値）」と呼ぶように見えます。コードをリファクタリングして、各ボタンのデータ属性を含めてから、それをそのまま渡します。

はこのバイオリンの例を参照してください：https://jsfiddle.net/88z1e4yu/

$(document).ready(function() { 
    $("#form-coin > input").on("click", function() { 
     getData($(this).data('coin')); 
    }); 
}); 

function getData(coin){ 
    alert(coin); 
    addition(document.getElementById(coin).value); 
}

出典

2017-02-28 19:16:44 Daniel

別の目的を果たしている別のボタンがあればどうなりますか？ –

より具体的なセレクタをクエリ/ボタンに追加するだけです。例えば、あなたが望む各入力に "add-btn"クラスを追加して、$（ '＃form-coin input.add-btn "）。on（" click "、...）をクリックするようにします。 – Daniel

jQueryの.is() functionは、渡されたパラメータがセレクタであることを期待しています。そのように、あなたのis()条件はありません"Add_1"

if($("[value='+']").is("#Add_1")){

あなたが交互にAttribute Starts With Selector

$('[id^="Add_"]'))

を使用して、それらすべてを取得し、後でAttribute Ends With Selector

で番号を確認することができ、 "#Add_1"をチェックする必要があります

$('[id$="_1"]'))

出典

2017-02-28 19:17:54 Gwellin

選択された要素は同じ値であるがidが異なる

答えて

関連する問題