如何创建动态 jquery 选择器

Question

我的锻炼程序索引页如下所示。

<% @workout_routines.each do |routine| %>
<ul>
<li>Name: <%= routine.name %></li>
<li>Days: <%= routine.split_length %></li>
<li>Difficulty: <%= routine.difficulty %></li> 
<button class= "exercises" id= "<%= routine.id %>">View Exercises</button>
<div class= "workoutshow" id= "<%= routine.id %>"></div>
</ul>
<% end %> 

当我单击练习按钮时，我想将 html 附加到锻炼显示div 中，仅用于我单击的锻炼，但我无法弄清楚如何在 jquery 选择器中使用字符串连接/插值。我尝试过这样的事情

$(".workoutshow #${data.id}") 

但到目前为止没有运气。有没有正确的方法可以做到这一点？另外，为了清楚起见，这是workoutshow.js中的代码。

$(document).ready(function(){
$(".exercises").on('click', function(e) { 
    $.get("/workout_routines/" + e.target.id, function(data){ 
        debugger;
        $(".workoutshow").append("<li>" + "Category: " + data["category"] + "</li>")
            .append("<li>" + "Difficulty: " + data["difficulty"] + "</li>")
    })
}) 
})

Answer 1

  /* json data to javascript json parser*/      
  var data = JSON.parse('<% @workout_routines %>');
  $('.exercises').click(function(){
        /* get '.exercises' index */
        var idx = $(this).index('.exercises');
        /* same index for '.workoutshow' use .eq()*/
        $('.workoutshow').eq(idx).append(
            "<li>" + 
                "Category: " + data[idx].category + 
            "</li>" +
            "<li>" + 
                "Difficulty: " +
                 data[idx].difficulty + 
            "</li>"
         );

    });