0

我很抱歉写了这么长的问题，但我被要求澄清有关该功能的几个细节

如果我想通过类或数据名称（或另一个不需要为每个将使用它的元素创建单独的 If 语句的方法）调用它，那么将另一个元素添加到这些 If 语句的正确方法是什么？

该函数用于成对的 2 个相互关联的元素（谁的类是投诉和排名）。第一个元素的名称与第二个元素的数据名称匹配，并且由于该函数已经识别了“排名”的数据名称，也许可以说第一个元素的名称=第二个元素的数据名称？

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

这是我正在尝试做的事情：

第一个 If 语句 - 如果值为：“. complaint” = “Too_small” AND .“ranking” = “1”，则设置元素
第二个 If 语句 - 如果值为：“.complaint” = “Too_small” OR .“ranking”，则更新元素=“1”

这第二个元素是 .complaint 类下的 select 标记的值，但是有几个元素具有相同的类，所以我需要一种方法来指定它是哪一个。我试图避免使用 ID，因为有 25 个 Select 元素（超过 100 种组合）。

我试过的方法

这不能正常工作（它不接受输入，除非在第二对（腰）之前选择了第一对（肩膀））

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")) 
{ ... }

函数的作用

此更改功能的目的是获取所有选择的投诉名称（即肩部、腰部）并通过排名将它们分组为动作（即增加或减少），因此对于各种组合调用不同的函数 - 在这种情况下“太小”和“1”。当用户同时选择投诉并对问题的重要性级别进行排名时，此代码段会将值添加到“increase_priority1”，并在用户更改任一元素时删除该值。

如果您想在上下文中看到这一点，我创建了 2 个小提琴。第一个是现有脚本http://jsfiddle.net/chayacooper/vWLEn/171/，第二个是我正在尝试做的工作示例，但它使用 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”，则投诉为“Shoulders too small”（选择名称=Shoulders value=Too_small），并为其分配了 1 级优先级（select class="ranking Shoulders" 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")

提到两个不同的元素，你在函数中对 $(this) 的所有使用似乎有点吓人，而且你从选定的 .complaint 选择中引入了 jQuery 工厂，你是再次调用所有

$('.complaint select')

在你的第一个 if 语句中。那个 jQuery 工厂调用会拉入一个包含所有 .complaint 选择元素的数组，因此，对其进行检查 .val() 可能会产生不希望的结果。我确定您打算改为检查 $(this).val() ，或者至少只针对一个 .complaint 选择元素，而不是整个数组。如果要检查整个数组，则应使用 .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 回答