Селекторы атрибутов в родительском дочернем элементе jQuery затем находят - PullRequest
Новая
       4

Селекторы атрибутов в родительском дочернем элементе jQuery затем находят

0 голосов
/ 20 октября 2011

Вчера или за день до того, как я получил некоторую помощь по , выберите из выпадающего списка значение переменной .

Что происходит, если в выпадающем списке есть совпадение, код jQuery просматривает значения и проверяет, есть ли совпадение по ценам и случаям. Если есть несоответствие, то окно предупреждения срабатывает.

Первая часть работает нормально, но вторая часть более хитрая, и я не могу понять это. 

$("select").change(function() {
var $this = $(this);
//first part
if ($("select").filter(function() {
    return $(this).val() === $this.val();})
    .parent()
    .next()
    .children("input[value!='" + $this
                                 .parent()
                                 .next()
                                 .children("input")
                                 .val() + "']")
    .length != 0) {

    // alert
    alert('mismatch1');

}
//second part
if ($("select").filter(function() {
    return $(this).val() === $this.val();})
    .children("td:eq(2)::has(input[value!='" + 
    $this.children("td:eq(2)>input").val() + "'])").length != 0) {
    // alert
    alert('mismatch2');

}
});

//$this.children("td:eq(2)>input").val() <<< this works

<form name="form1" ID="form1" action="array_script.cfm">
<table id="test1">
<tr>
<td>
    <select name="selectA" id="selectA" class="priceA">
        <option id="A" value="">None</option>
        <option id="A" value="A">A</option>
        <option id="A" value="B">B</option>
        <option id="A" value="C">C</option>
    </select>
</td>
<td>
    <input id="priceA" type="text" name="price" value="8.99">
</td>
<td>
    <input id="perCaseA" type="text" name="perCase" value="4">
</td>
</tr>
<tr>
<td>
    <select name="selectB" id="selectB" class="priceB">
        <option id="B" value="">None</option>
        <option id="B" value="A">A</option>
        <option id="B" value="B">B</option>
        <option id="B" value="C">C</option>
    </select>
</td>
<td>
    <input  id="priceB" type="text" name="price" value="8.99">
</td>
<td>
    <input  id="perCaseB" type="text" name="perCase" value="4">
</td>
</tr>
<tr>
<td>
    <select name="selectC" id="selectC" class="priceC">
        <option id="C" value="">None</option>
        <option id="C" value="A">A</option>
        <option id="C" value="B">B</option>
        <option id="C" value="C">C</option>
    </select>
</td>
<td>
    <input  id="priceC" type="text" name="price" value="8.99">
</td>
<td>
    <input  id="perCaseC" type="text" name="perCase" value="4">
</td>
</tr>
</table>
</form>

1 Ответ

0 голосов
/ 20 октября 2011

Не знаю, понял ли я, что вы пытаетесь сделать, но, возможно, следующий код поможет.

http://jsfiddle.net/cfQSr/19/

Добавляет класс mismatch к td s, чьи input s не совпадают, если соответствующие select имеют одинаковое значение: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style type="text/css">
      .mismatch {
        background: #ff9999;
      }
    </style>
  </head>

  <body>
    <form name="form1" ID="form1" action="array_script.cfm">
    <table id="test1">
    <tr>
    <td>
        <select name="selectA" id="selectA" class="priceA">
            <option id="A" value="">None</option>
            <option id="A" value="A">A</option>
            <option id="A" value="B">B</option>
            <option id="A" value="C">C</option>
        </select>
    </td>
    <td>
        <input id="priceA" type="text" name="price" value="8.99">
    </td>
    <td>
        <input id="perCaseA" type="text" name="perCase" value="4">
    </td>
    </tr>
    <tr>
    <td>
        <select name="selectB" id="selectB" class="priceB">
            <option id="B" value="">None</option>
            <option id="B" value="A">A</option>
            <option id="B" value="B">B</option>
            <option id="B" value="C">C</option>
        </select>
    </td>
    <td>
        <input  id="priceB" type="text" name="price" value="8.99">
    </td>
    <td>
        <input  id="perCaseB" type="text" name="perCase" value="4">
    </td>
    </tr>
    <tr>
    <td>
        <select name="selectC" id="selectC" class="priceC">
            <option id="C" value="">None</option>
            <option id="C" value="A">A</option>
            <option id="C" value="B">B</option>
            <option id="C" value="C">C</option>
        </select>
    </td>
    <td>
        <input  id="priceC" type="text" name="price" value="8.99">
    </td>
    <td>
        <input  id="perCaseC" type="text" name="perCase" value="4">
    </td>
    </tr>
    </table>
    </form>

    <script type="text/javascript">
      (function () {
        "use strict";

        $('#form1').bind('change', function (evt) {
          $('td.mismatch', this).removeClass('mismatch');

          var selects = $('select', this);
          $(selects).each(function () {
            var that = this;
            $(selects).not(this).each(function () {

              // we have a similar select
              if ($(this).val() !== '' && $(this).val() === $(that).val()) {
                // now compare inputs
                var
                  thisInputs = $('input', $(this).closest('tr')),
                  thatInputs = $('input', $(that).closest('tr'));

                $(thisInputs).each(function (i) {
                  if ($(this).val() !== $(thatInputs).eq(i).val()) {
                    $(this).closest('td').addClass('mismatch');
                    $(thatInputs).eq(i).closest('td').addClass('mismatch');
                  }
                });
              }
            });
          });
        });
      }());
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...