Question

This问题可能有关。

我有一个Django配方应用程序，它使用包含CharField TextArea的表单。该字段用于输入方向列表（字符串）。我已选择使用换行符（表单中的ENTER）分隔每个方向，并在我的模板（html）中使用以下内容以保持原始形式的换行符

<div id="items">
    <p> 
        {{ recipe.directions_field|safe }}
    </p>
</div>

这基本上会显示为

<div id="items">
    <p>
        Line one <br/>
        Two <br/> 
        Three <br/>
    </p>
</div>

我想要做的是使用jQuery来检查＆＃34; （删除线）我的模板中有一行（可能包含几个单词）。我尝试了以下内容，但正如预期的那样，这会检查整个段落。

<script>
  $(document).ready(function() {
    $("#items p").click(function () {
    $(this).toggleClass('stroked');
    });
  });
</script>

我的css在哪里

.stroked{ text-decoration: line-through; }

在我的Django视图中，我更换了＆＃34; \ n＆＃34;使用html换行符，以确保在模板中显示时不会删除换行符。

directions = directions.replace("\n", "<br/>")

如果我能找到一种简单的方法来使用<br/>作为分割器而不是＆＃34;，我认为像this这样的解决方案会起作用。＆＃34;或任何其他符号。在示例中，我无法使用<br/>。

任何建议，使用this之类的解决方案或其他方式？我想有很多方法可以解决这个问题，但希望找到一个简单的实现方法。

感谢您的回复。

Answer 1

如果将每一行包装到<span></span>中会更容易，如下所示：

<div id="items">
<p>
    <span>line one <br/></span>
    <span>line two <br/></span>
    <span>line three <br/></span>
</p>
</div>

所以你需要在javascript中做的是：

$(function(){
    $('#items > p > span').click(function(){
        if($(this).attr('class') == 'stroked'){
            $(this).removeAttr('class');
        }
        else{
            $(this).addClass('stroked');
        }
    });
});

使用基于换行符的jQuery在段落中选择行

1 个答案: