选择同一行输入的项目ID以单独保存

Question

我正在尝试创建一个界面，我可以为每行选择项目并单独保存（或者在必要时保存整个页面）。

在上面的示例中，第一行是正确的，但对于第二行应该只是“ru”，它也会从第一行带来相同的内容..

如下例所示，由于我对整个页面使用相同的功能，但是我在为每行分隔项目时遇到一些麻烦：

$(function() {
  var selec = [];
  $('#list li').click(function() {

    if ($(this).hasClass('gray')) {
      $(this).addClass("blue").removeClass("gray");
    } else {
      $(this).addClass("gray").removeClass("blue");
    }

    var this_row = $(this).closest('tr').attr('row-id');
    var this_lang = $(this).attr('data-lang');

    if ($(this).hasClass('blue')) {
      selec.push(this_lang);
    } else {
      var index = selec.indexOf(this_lang);
      selec.splice(index, 1);
    }
    $('#to_save_' + this_row).val(selec);
    return false;
  });

});

.tb table tr td {
  border: 1px solid #ccc;
}
.minitag:hover {
  background-color: #fff !important;
  color: #ccc !important;
  border: 1px solid #EE725C !important;
  text-shadow: 0 1px #A32D16 !important;
  cursor: pointer;
  opacity: 0.7;
}
.minitag {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 10px;
  background-color: #FFB600;
  border: 1px solid #b62435;
  text-shadow: 0 1px #ccc;
  color: #000;
  font-weight: 500;
  margin: 0 2px 2px 0;
  display: inline-block;
  padding: 0 2px;
  cursor: default;
}
.minitag.blue {
  background-color: #4CABDA !important;
  border: 1px solid #296888 !important;
  text-shadow: 0 1px #296888 !important;
  color: #ffffff !important;
}
.selected {
  background-color: #EE725C !important;
  color: #fff;
  border: 1px solid #EE725C !important;
  text-shadow: 0 1px #A32D16 !important;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="tb" id="list">
  <tr row-id="501">
    <td>je suis tré bon</td>
    <td>
      <li class="minitag gray" data-lang="none">
        None</li>
      <li class="minitag gray" data-lang="en">
        English</li>
      <li class="minitag gray" data-lang="ja">
        Japanese</li>
      <li class="minitag gray" data-lang="ko">
        Korean</li>
      <li class="minitag gray" data-lang="it">
        Italian</li>
      <li class="minitag gray" data-lang="zh">
        Chinese</li>
      <li class="minitag gray" data-lang="es">
        Spanish</li>
      <li class="minitag gray" data-lang="fr">
        French</li>
      <li class="minitag gray" data-lang="th">
        Thai</li>
      <li class="minitag gray" data-lang="de">
        German</li>
      <li class="minitag gray" data-lang="pt">
        Portuguese</li>
      <li class="minitag gray" data-lang="ro">
        Romanian</li>
      <li class="minitag gray" data-lang="ru">
        Russian</li>
      <li class="minitag gray" data-lang="ar">
        Arabic</li>
      <input value="" id="to_save_501" name="to_save" style="border: 1px solid #000" type="text">
    </td>
    <td>Save Row</td>
  </tr>
  <tr row-id="503">
    <td>yo soy muy bello</td>
    <td>
      <li class="minitag gray" data-lang="none">
        None</li>
      <li class="minitag gray" data-lang="en">
        English</li>
      <li class="minitag gray" data-lang="ja">
        Japanese</li>
      <li class="minitag gray" data-lang="ko">
        Korean</li>
      <li class="minitag gray" data-lang="it">
        Italian</li>
      <li class="minitag gray" data-lang="zh">
        Chinese</li>
      <li class="minitag gray" data-lang="es">
        Spanish</li>
      <li class="minitag gray" data-lang="fr">
        French</li>
      <li class="minitag gray" data-lang="th">
        Thai</li>
      <li class="minitag gray" data-lang="de">
        German</li>
      <li class="minitag gray" data-lang="pt">
        Portuguese</li>
      <li class="minitag gray" data-lang="ro">
        Romanian</li>
      <li class="minitag gray" data-lang="ru">
        Russian</li>
      <li class="minitag gray" data-lang="ar">
        Arabic</li>
      <input value="" id="to_save_503" name="to_save" style="border: 1px solid #000" type="text">
    </td>
    <td>Save Row</td>
  </tr>
  <tr row-id="506">
    <td>I am a lumberjack</td>
    <td>
      <li class="minitag gray" data-lang="none">
        None</li>
      <li class="minitag gray" data-lang="en">
        English</li>
      <li class="minitag gray" data-lang="ja">
        Japanese</li>
      <li class="minitag gray" data-lang="ko">
        Korean</li>
      <li class="minitag gray" data-lang="it">
        Italian</li>
      <li class="minitag gray" data-lang="zh">
        Chinese</li>
      <li class="minitag gray" data-lang="es">
        Spanish</li>
      <li class="minitag gray" data-lang="fr">
        French</li>
      <li class="minitag gray" data-lang="th">
        Thai</li>
      <li class="minitag gray" data-lang="de">
        German</li>
      <li class="minitag gray" data-lang="pt">
        Portuguese</li>
      <li class="minitag gray" data-lang="ro">
        Romanian</li>
      <li class="minitag gray" data-lang="ru">
        Russian</li>
      <li class="minitag gray" data-lang="ar">
        Arabic</li>
      <input value="" id="to_save_506" name="to_save" style="border: 1px solid #000" type="text">
    </td>
    <td>Save Row</td>
  </tr>
</table>

https://jsfiddle.net/53henkL8/10/

任何提示？

Answer 1

你有全局selec，它包含所有值，这里是为每行保留不同数组的对象。

$(function() {
  var selec = {};
  $('#list li').click(function() {
    if ($(this).hasClass('gray')) {
      $(this).addClass("blue").removeClass("gray");
    } else {
      $(this).addClass("gray").removeClass("blue");
    }

    var this_row = $(this).closest('tr').attr('row-id');
    var this_lang = $(this).attr('data-lang');
    if(!selec[this_row]) selec[this_row] = [];

    if ($(this).hasClass('blue')) {
      selec[this_row].push(this_lang);
    } else {
      var index = selec[this_row].indexOf(this_lang);
      selec[this_row].splice(index, 1);
    }
    $('#to_save_' + this_row).val(selec[this_row]);

    return false;
  });  
});

http://jsfiddle.net/cc71cwqe/1/