0

このような長い質問を書いたことをお詫びしますが、機能に関するいくつかの詳細を明確にするように求められました

クラスまたはデータ名（またはそれを利用する要素ごとに個別のIfステートメントを作成する必要がない別のメソッド）で呼び出す場合、これらのIfステートメントに別の要素を追加する正しい方法は何でしょうか？

この関数は、相互接続された2つの要素のペアで使用されます（クラスは苦情とランク付けです）。1番目の要素の名前は2番目の要素のデータ名と一致します。関数はすでに「ランキング」のデータ名を識別しているため、1番目の要素の名前= 2番目の要素のデータ名と言えますか？

if ($(this).val() == 1 && !$(this).data("decrease_priority1")) { ... }
if ($(this).data("decrease_priority1") && $(this).val() != 1) { ... }

これが私がやろうとしていることです：

1番目のIfステートメント-値が次の場合に要素を設定します："。complaint"="Too_small" AND。"ranking"="1"
2番目のIfステートメント-値が次の場合に要素を更新します："。complaint"="Too_small" OR。"ranking" = "1"

この2番目の要素は、.complaintクラスの下のselectタグの値ですが、同じクラスの要素がいくつかあるため、どの要素であるかを指定する方法が必要です。25個のSelect要素（100をはるかに超える組み合わせ）があるため、IDの使用を避けようとしています。

私が試した方法

これは正しく機能しません（2番目のペア（ウエスト）の前に最初のペア（肩）が選択されていない限り、入力を受け入れません）

if ($(".complaint select").val() === "Too_small" && $(this).val() == 1 && !$(this).data("increase_priority1")) 
{ ... }

if ($(this).data("increase_priority1") && ($(this).val() != 1 || $(".complaint select").val() != "Too_small")) 
{ ... }

関数の機能

この変更関数の目的は、選択したすべての苦情名（つまり、肩、腰）をランク付けによってアクション（つまり、増加または減少）にグループ化することです。したがって、さまざまな組み合わせに対して呼び出されるさまざまな関数があります。この場合は「Too_small」および「1」。このスニペットは、ユーザーが苦情と問題の重要度の両方を選択したときに「increase_priority1」に値を追加し、ユーザーがいずれかの要素を変更したときに値を削除します。

これをコンテキストで確認したい場合は、2つのフィドルを作成しました。1つ目は既存のスクリプトhttp://jsfiddle.net/chayacooper/vWLEn/171/で、2つ目は私がやろうとしていることの実例ですが、IDを使用してhttp://jsfiddle.net / chayacooper / gYtZw / 61 /

Javascript

var $increase_priority1 = $(".increase_priority1");
// variables for other issues and priority levels go here

$(".ranking").change(function () {
    var name = $(this).data("name"); // Gets data-name of ".ranking" 

    // Sets & Unsets increase_priority1

    // I need to change this to state If values are "Too_small" AND "1" AND (...)  
    if ($(this).val() == 1 && !$(this).data("increase_priority1")) {
        //rank is 1, and not yet added to priority list
        $("<option>", {text: name, val: name}).appendTo($increase_priority1);
        $(this).data("increase_priority1", true); // flag as a priority item
    }
    //If either ranking or complaint value changes 
    if ($(this).data("increase_priority1") && $(this).val() != 1) {
        //is in priority list, but now demoted
        $("option[value=" + name + "]", $increase_priority1).remove();
        $(this).removeData("increase_priority1"); // no longer a priority1 item
    }
    // Similar If Statements go here to set & unset elements for other priority types
});

$increase_priority1の値が"Shoulders"の場合、苦情は肩が小さすぎ（select name = Shoulders value = Too_small）、レベル1の優先度が割り当てられました（select class = "rankingshoulders" value = 1）。

HTML

<label>To Increase - 1rst Priority
<select name="modify_increase_1rst[]" class="increase_priority1" multiple></select></label>    
<span class="complaint"><label>Shoulders</label>
<select name=Shoulders><option value="null">Select</option><option value="Too_small">Too Small</option><option value="Too_big">Too Big</option><option value="Too_expensive">Too expensive</option>   
</select></span>
<label>Ranking</label>
<select name="importance_bother_shoulders" class="ranking shoulders" data-name="Shoulders">
    <option value="Null">Select</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
    <option value="5">5</option>
</select>
4

2 に答える 2

0

あなたの質問は少し紛らわしいと思いますが、

$(".ranking, .complaint select")

2つの異なる要素を参照すると、関数内での$（this）の使用のすべてと、jQueryファクトリに持ち込んだ選択された.complaint select内から、再びすべてを呼び出す

$('.complaint select')

最初のifステートメントで。そのjQueryファクトリ呼び出しは、すべての.complaint select要素の配列をプルするため、.val（）をチェックすると、おそらく望ましくない結果になります。代わりに$（this）.val（）をチェックするか、少なくとも配列全体ではなく、1つの.complaintselect要素のみをターゲットにするつもりです。配列全体をチェックする場合は、.each（）を使用して調査する必要があります。

あなたがやろうとしていることに沿ってもっと？繰り返しになりますが、コードに関する混乱（非常に無計画です）とアプリケーションの目的自体に関する混乱の間で、実際にここで何をしようとしているのかを理解するのは非常に困難です。これは、これらの要素を分離する方法を示すために、より概念的なものです。あなたはそれらをモジュール化する必要があります、彼らはどんな懸念も共有するべきではありません：

$(".complaint select").change(function() {
     var name = $(this).data("name"); //get priority name    

     // Why was it && before? It's either Too_small or 1 or "Too_small" == 1 so
     // you don't have to check twice for the same thing
     if (($(this).val() === "Too_small" || $(this).val() == 1)  
         &&!$('.ranking').data("increase_priority1")) {
        //rank is 1, and not yet added to priority list
        $("<option>", {text:name, val:name}).appendTo($increase_priority1);
        // .complaint select does not contain a data "increase priority"
        //$(this).data("increase_priority1", true); //flag as a priority item
});

$('.ranking').change(function(){
    if ($(this).data("increase_priority1") &&
    ($(this).val() != 1)) {
        $(".complaint select").each(function(){
        if($(this).val() != "Too_small"){
            //is in priority list, but now demoted
            $("option[value=" + name + "]", $increase_priority1).remove();
            $(this).removeData("increase_priority1"); //no longer a priority item
        }
    }     
});
于 2012-11-24T05:01:03.317 に答える
0

これを理解するのを手伝ってくれた@Loraxに感謝します:-)

以下に最終的なコードを含め、その実例をhttp://jsfiddle.net/chayacooper/6YnQd/42/に作成しました。

Javascript

$('.complaint select.complaintOpt').change(function() {
var $container = $(this).parent(),
    $item = $container.find('.complaintItem'),
    itemId = $item.attr('id'),
    itemVal = $item.val(),
    itemText = $item.find('option[value=' + itemVal + ']').html(),
    rank = $container.find('.complaintRanking').val();    
// Ignore if not a complete complaint
if((itemVal == 'Null') || (rank == 'Null')) {
    return;
}    
// Remove any existing complaint
$('select.priorityIssue option.' + itemId).remove();    
var $selectedOption = $item.find('option:selected');
var targetBase = '';
if($selectedOption.hasClass('goal-increase')) {
    targetBase = '#priorityIncrease';
}
else if($selectedOption.hasClass('goal-decrease')) {
    targetBase = '#priorityDecrease';
}    
if(targetBase != '') {
    // Add new complaint
    $(targetBase + rank + 'Issues')
        .append($('<option>' + $item.attr('name') + '</option>').addClass(itemId));
}
});

HTML

<label>To Increase </label><br/>
<label for="priorityIncrease1Issues">First Priority</label>
<select name="modify_increase_1rst[]" id="priorityIncrease1Issues" class="priorityIssue" multiple></select>
<label for="priorityIncrease2Issues">Second Priority</label>
<select name="modify_increase_2nd[]" id="priorityIncrease2Issues" class="priorityIssue" multiple></select>
<br/>
<label>To Decrease </label><br/>
<label for="priorityDecrease1Issues">First Priority</label>
<select name="modify_decrease_1rst[]" id="priorityDecrease1Issues" class="priorityIssue" multiple></select>
<label for="priorityDecrease2Issues">Second Priority</label>
<select name="modify_decrease_2nd[]" id="priorityDecrease2Issues" class="priorityIssue" multiple></select>
<br />
<div class="complaint">
<label for="shoulders">Shoulders</label>
<select name=Shoulders id="shoulders" class="complaintOpt complaintItem">
    <option value="Null">Select</option>
    <option value="too_big" class="goal-decrease">Too Big</option>
    <option value="too_small" class="goal-increase">Too Small</option>
</select>    
<label for="shouldersRanking">Ranking</label>
<select name="importance_bother_shoulders" id="shouldersRanking" class="complaintOpt complaintRanking">
    <option value="Null">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select> 
</div>
于 2012-11-29T22:23:49.577 に答える