0

如果“.ranking”或“.complaint select”发生更改，如何触发此功能？

当用户选择投诉并对问题的重要性级别进行排序时，此更改功能会在“increase_priority1”中添加和/或删除值。目前，它仅在“排名”更改时触发，因此如果用户更改问题而不更改重要性级别，则不会相应地更改值。

var $increase_priority1 = $(".increase_priority1");
// If value is "Shoulders", complaint was Shoulders too small (select name=Shoulders value=Too_small) and it was assigned a level 1 priority (select class="ranking shoulders" value=1). 
// var's for other issues and priority levels go here

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

   if ($(".complaint select").val() === "Too_small" && $(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 ($(this).data("increase_priority1") && ($(this).val() != 1 || $(".complaint select").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
   }
   // Similar If Statements to set & unset other elements go here
});

有多个投诉和排名元素，反映了客户投诉的各个领域，并以 1 - 5 的等级进行排名。

小提琴在上下文中显示了这一点：http: //jsfiddle.net/chayacooper/vWLEn/168/

4

2 回答 2

1

像这样试试

$(".ranking, .complaint select").change(function() {
    ...
}
于 2012-11-22T00:32:47.227 回答
1

如果您重组代码可能会更容易。这个怎么样：

HTML：

<label for="priority1Issues">First Priority</label>
<select id="priority1Issues" class="priorityIssue" multiple></select>

<label for="priority2Issues">Second Priority</label>
<select id="priority2Issues" class="priorityIssue" multiple></select>

<br />
<div class="complaint">
    <label for="shoulders">Shoulders</label>
    <select id="shoulders" class="complaintOpt complaintItem">
        <option value="Null">Select</option>
        <option value="too_big">Too Big</option>
        <option value="too_small">Too Small</option>
    </select>

    <label for="shouldersRanking">Ranking</label>
    <select id="shouldersRanking" class="complaintOpt complaintRanking">
        <option value="Null">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>

现在您可以使用<div>with 类complaint来选择性地定位它的内容：

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 (using the CSS class to target the correct option)
    $('select.priorityIssue option.' + itemId).remove();

    // Add new complaint (we include a CSS class to make it easier to refer to this
    //   particular type of complaint later, if necessary)
    $('#priority' + rank + 'Issues')
        .append($('<option>' + itemText + '</option>').addClass(itemId));
});

您现在应该能够复制其他项目的“投诉 div”（只需确保更改<select>新元素的 ID div）。这里有一个例子：http: //jsfiddle.net/6YnQd/

于 2012-11-28T15:33:13.650 回答