【问题标题】:Jquery making Selectors in a MVC ForeachJquery 在 MVC Foreach 中制作选择器
【发布时间】:2012-04-14 12:49:54
【问题描述】:

我正在尝试实现一个评级插件。我能够让评级插件正常工作。我正在尝试扩展它。因此,每次单击评级时,它都会将标签置于评级本身之下。目前它绑定到页面上其他地方的 css id。

场景是一条推特消息,似乎无法让选择器更新消息本身。因为它不是唯一的,所以它把信息放在所有的人身上。

我怎样才能使该项目独一无二。该插件的文档是http://rateit.codeplex.com/documentation

 $(document).ready(function () {

      //we bind only to the rateit controls within the products div

      $(".rateit").bind('over', function (event, value) { $(this).attr('title', value); });
      $(" .rateit").bind('rated reset', function (e) {

          var ri = $(this);

          //if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to  null .
          var value = ri.rateit('value');
        var ratingid = ri.data('ratingid');           



          //maybe we want to disable voting?
          ri.rateit('readonly', true);

          $.ajax({
              url: '/Home/GetRating', //your server side script
              data: { id: ratingid, value: value }, //our data
              type: 'POST',
              success: function (data) {
                  $('#ratemsg').html(data);

              },
              error: function (jxhr, msg, err) {
                  $('#response').append('<li style="color:red">' + msg + '</li>');
              }
          });
      });

  });

</script>

 @foreach (var item in Model)
{ 
 <div id="TwitterMessageBox@(item.StatusId.ToString())" class="TwitterMessageBox">

    <ol>
        <li class="TweetLineBody">
            @Html.Hidden("Statusid", item.StatusId)
            <div class="TwitProfileImage">
                <img src=@Url.Content(item.ImageUrl) alt="@item.ScreenName" />
            </div>
            <div class="TwitRealName">
                @item.User
            </div>
            <div class="TwitNickName">
                @MvcHtmlString.Create(@Html.Namify(@item.ScreenName))
            </div>
            <div class="TweetText">
                @MvcHtmlString.Create(@item.Tweet)</div>
            <div class="TweetTime">
                @Html.RelativeDate(@item.Created)</div>

            <div id="TweetMessageRating@(item.StatusId.ToString())" name="TweetMessageRating@(item.StatusId.ToString())"  class="TweetRating">

               // This is where the rating widget goes and records and updates              
                <div data-ratingid="@item.StatusId"   class="rateit"></div>
         // this is where i want to go but i cant figure out a way
                 <span id ="ratemsg" name="TweetRating@(item.StatusId.ToString())"  class="ratemsg"> </span>
             </div>

        </li>
    </ol>

  </div>
 }

正如您在上面看到的,我试图通过将作为状态 ID 的消息 ID 添加到选择器来设置唯一键,但我似乎无法使用通配符选择它。我在 jquery 网站上尝试了一些示例,但似乎无法理解。

【问题讨论】:

    标签: jquery css asp.net-mvc jquery-selectors


    【解决方案1】:

    不使用 id,只保存当前 .rateit 元素的兄弟。

    var ri = $(this),
        msg = ri.next();
    
     ...
    
        success: function (data) {
            msg.html(data);
        },
    

    【讨论】:

    • 效果很好。让我明白这一点。 ri.next 获取下一个元素并设置值。我将它设置为一个 msg 对象,然后它就可以工作了。
    • 是的,DOM 遍历 > 选择器。如果您知道哪个消息元素对应于评级元素,则不需要唯一标识符。
    • 我正在尝试将 div 从推文中移出,投票明星正在破坏布局
    猜你喜欢
    • 2012-12-21
    • 2023-03-05
    • 2012-06-29
    • 2010-10-28
    • 2010-11-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-09-27
    相关资源
    最近更新 更多