Question

我有一个从SQL Select查询创建的c＃变量，该查询传递给javascript数组：

var positionTagsJS = @Html.Raw(positionTags);

我想在JS数组中使用这些值来将我的selectable类改为'ui-selected'。可选项是使用以下内容创建的：

var db = Database.Open("mydb");
       foreach (var item in db.Query("SELECT positiontagName FROM positiontag"))
      {
         var positiontagName = item.positiontagName;
        <ul class="selectable" id="selectable1">
             <li class="ui-state-default" id="@positiontagName">
                 @positiontagName
             </li>
        </ul>
      }

所以我有一组基于我的标签的列表项ID的可选项。其中一些子集位于我的positionTagsJS数组中。我想将那些类更改为.ui-selected。我已经尝试了以下代码但它似乎无法找到ID或者它可能找到了id但是由于某种原因不会触发类更改。这是代码。

  function loadSet() 
     {
           $('#selectable1 .ui-selected').removeClass('ui-selected');

//all this is doing up to here is clearing any selections which works
//this next bit doesn't work...

           for (var i = 0, len = positionTagsJS.length; i < len; i++) {
           $('#selectable1')
          .find("li:contains('" + positionTagsJS[i] + "')")
          .addClass('ui-selected');
      }

如果我选择tag1，它会更改列表中第一个项目的类，但仅此而已。以下是我的“查看页面源代码”，让您了解我想要抓住的ul li位。

 <ul class="selectable" id="selectable1">
     <li class="ui-state-default" id="tag1">
           tag1
     </li>
 </ul>
 <ul class="selectable" id="selectable1">
     <li class="ui-state-default" id="tag2">
           tag2
     </li>
  </ul>
   ...
   ...
   ...

我想也许我需要把ul视为父母，将李视为孩子。并尝试使用其中一种方法进入我的选择器，但陷入僵局。

Answer 1

我相信您可以通过检查数据是否存在于您构建可选项的位置来实现所需结果：

foreach (var item in db.Query("SELECT positiontagName FROM positiontag"))
  {
     var positiontagName = item.positiontagName;
     var myClass = "selectable";
     if (positionTags.Contains(positiontagName)) {
        myClass = myClass + " ui-selected"
     }
    <ul class="@myClass" id="selectable1">
         <li class="ui-state-default" id="@positiontagName">
             @positiontagName
         </li>
    </ul>
  }

Answer 2

我不完全确定为什么会这样有效，但我将devlin建议的c＃方法与我原来的jQuery代码结合起来并且它有效。首先，在foreach循环中，devlin建议使用IF语句。

var db = Database.Open("mydb");
       foreach (var item in db.Query("SELECT positiontagName FROM positiontag"))
      {
         var positiontagName = item.positiontagName;
         var myClass = "";
         if (positionTags.Contains(@positiontagName))
                        {
                            myClass = myClass + " ui-selected";
                        }
        <ul class="selectable" id="selectable1">
             <li class="ui-state-default @myClass" id="@positiontagName">
                 @positiontagName
             </li>
        </ul>
      }

虽然看起来这一点应该改变它没有的列表项的类。我还需要在foreach之后运行原始脚本的变体。

      <script>loadSet();</script>

调用

    var positionTagsJS = @Html.Raw(positionTags);
    function loadSet() {           
        for (var i = 0, len = positionTagsJS.length; i < len; i++) {
            $('#selectable1')
          .find("li:contains('" + positionTagsJS[i] + "')")
            .addClass('ui-selected');
        }
    }

这些对我来说似乎完全是多余的，因为它们（C＃代码和JQuery代码）只是将列表项的类更改为＆＃34; ui-selected＆＃34;。然而，两者都不能独立工作，但我得到必要的行为。必须有一个更好的方法来做到这一点。

jQuery Selectable - 根据Array数据更改类

2 个答案: