код сценария не выполняется внутри цикла foreach? - PullRequest
Новая
       2

код сценария не выполняется внутри цикла foreach?

0 голосов
/ 07 апреля 2019 
<!--language: lang-html--> 
@foreach (var book in Model.Category.Books)
   {

      <div class="rate-star-@book.Id"></div>
        <script>
          $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
        </script>

  }

Краткое объяснение того, что я пытаюсь сделать: Этот код скрипта внутри цикла является одним из плагинов звездной оценки, который мне нужно реализовать для книг на странице. Проблема здесь в том, что мне нужно включить код jquery дальше в тело, но поскольку библиотека JQuery загружается позже, чем код сценария, я получаю сообщение об ошибке «$ is notfined».

Что я пробовал: Я попытался реализовать решение на этой странице
[ Обработка кода, который опирается на jQuery до загрузки jQuery , написанный Ашкан Мобаен Хиабани . Я поместил код внутри функции. Функция вызывается внизу корпуса. Он должен вызываться столько раз, сколько он создается за одну итерацию. Но поскольку он вызывается только один раз внизу, остальные созданные функции не запускаются, и в результате функция влияет только на одну книгу. 

 <!--language: lang-html--> 
    @foreach (var book in Model.Category.Books)
       {                  
          <div class="rate-star-@book.Id"></div>
            <script>
   function rateStar{
              $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
            </script>
           }                                   
      }

@section scripts
 { 
     <script>
 rateStar(); 
     </script>
}

Так как сделать, чтобы эта функция вызывалась столько раз, сколько она создана в документе?

1 Ответ

1 голос
/ 08 апреля 2019

in Views/Shared open _Layout.cshtml и в теге head создайте тег script и создайте массив (назовите его postJquery: 

<head>
...
   <script>var postJquery = [];</script>
...
</head>

Теперь в том же файле (_Layout.cshtml) перейдите в конец и добавьте этот код перед окончанием тега body: 

<script>for(var i=0;i<postJquery.length;i++) postJquery[i]();</script> //just ad this line
</body>

Теперь везде, где вам нужно запустить код, который зависит от jquery, просто добавьте его в функцию и добавьте его в массив postJquery, и он будет запускаться после загрузки jQuery следующим образом: 

postJquery.push(function(){
    //your code goes here
});

например, ваш случай будет: 

@foreach (var book in Model.Category.Books)
   {                  
      <div class="rate-star-@book.Id"></div>
        <script>
          postJquery.push(function(){
              $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
          });
        </script>
       }                                   
  }

Приведенный выше код будет работать нормально, но мне не нравится, что тег скрипта и его содержимое будут повторяться для каждого элемента книги, например, если в цикле 20 книг, следующий код будет повторяться 20 раз (конечно, для каждой будет изменяться идентификатор книги): 

<script>
     postJquery.push(function(){
          $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
     });
</script>

Так что вместо этого я бы сделал что-то вроде этого: 

@foreach (var book in Model.Category.Books)
   {                  
      <div class="rate-star" data-id="@book.Id"></div>
   }                                   
<script>
   postJquery.push(function(){
       $(".rate-star").stars({ stars:5, readonly:false});
   });
</script>

Поскольку я не знаю о .stars, следует ли использовать его для одного элемента (и нажатие на приведенный выше код влияет на все элементы), вы можете сделать это следующим образом: 

@foreach (var book in Model.Category.Books)
   {                  
      <div class="rate-star" data-id="@book.Id"></div>
   }                                   
<script>
   postJquery.push(function(){
       $(".rate-star").each(function(){
            $(this).stars({ stars:5, readonly:false});
       });
   });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...