如何在jQuery中使用onclick函数在类中附加@if和@foreach

Question

每当用户从下拉框中选择一项时，我都想在类中添加if和foreach语句。
应该在其中添加的标签是：

• @if($article->tags)
• @foreach($article->tags as $articletag)
• @if($articletag->tag == $(this).text())
  
  

$(this).text()是用户在下拉框上单击的文本。 这些if和foreach的目的是每当用户从下拉框中选择一项时，都基于filtername($this.text())过滤表。 我该怎么做？

JavaScript运行之前的HTML内容：

<div class="content">
@if($articles)
    @foreach($articles as $article)
        <div class="row article art-content">
            <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
                <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                    <img src="{{ url('image').'/'.$article->featured_image }}?w=460&h=267&fit=crop" alt="" class="img-responsive"/>
                </a>
            </div>
            <div class="col-xs-12 col-md-6 hidden-md hidden-lg">
                <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                    <?php $image = $article->mobile_image != null ? $article->mobile_image : $article->featured_image; ?>
                    <img src="{{ url('image').'/'.$image }}?h=imageHeight" alt="" class="img-responsive"/>
                </a>
            </div>
            <div class="col-xs-12 col-md-6">
                <h3 class="article-title">
                    <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                        {{ $article->title }}
                    </a>
                </h3>
                <span>Published on: {{ date('M d, Y', strtotime($article->published_on)) }}</span>
                <div class="spacer20"></div>
                <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}" class="btn btn-primary">Read Article <i class="fa fa-chevron-right fa-fw"></i> </a>
            </div>
        </div>
        <hr/>
    @endforeach
    <div class="text-center">
        {!! $articles->render() !!}
    </div>
@else
<div class="row spacer50 text-center">
    <div class="col-xs-12 spacer50">
        <h4>The key you entered does not match any articles. <br/>Please click <a href="{{ url('articles') }}">here</a> to see a list of all available articles.</h4>
    </div>
</div>
@endif

JavaScript执行时的HTML内容：

<div class="content">
@if($articles)
    @foreach($articles as $article)
        @if($article->tags) //added line
            @foreach($article->tags as $articletag) //added line
                @if($articletag->tag == 'whatever text the dropdown clicks') //added line
                <div class="row article art-content">
                    <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
                        <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                            <img src="{{ url('image').'/'.$article->featured_image }}?w=460&h=267&fit=crop" alt="" class="img-responsive"/>
                        </a>
                    </div>
                    <div class="col-xs-12 col-md-6 hidden-md hidden-lg">
                        <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                            <?php $image = $article->mobile_image != null ? $article->mobile_image : $article->featured_image; ?>
                            <img src="{{ url('image').'/'.$image }}?h=imageHeight" alt="" class="img-responsive"/>
                        </a>
                    </div>
                    <div class="col-xs-12 col-md-6">
                        <h3 class="article-title">
                            <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}">
                                {{ $article->title }}
                            </a>
                        </h3>
                        <span>Published on: {{ date('M d, Y', strtotime($article->published_on)) }}</span>
                        <div class="spacer20"></div>
                        <a href="{{ url('article/'.$article->category->slug.'/'.$article->slug) }}" class="btn btn-primary">Read Article <i class="fa fa-chevron-right fa-fw"></i> </a>
                    </div>
                </div>
                <hr/>
                @endif
            @endforeach
        @endif
    @endforeach
    <div class="text-center">
        {!! $articles->render() !!}
    </div>
@else
<div class="row spacer50 text-center">
    <div class="col-xs-12 spacer50">
        <h4>The key you entered does not match any articles. <br/>Please click <a href="{{ url('articles') }}">here</a> to see a list of all available articles.</h4>
    </div>
</div>
@endif

JavaScript：

$('#tags li').on('click', function(){
    $('.content').hide();
    if($(this).text() == 'All')
        $('.content').fadeIn('slow');
    else {
        //add the @foreach and @ifs
    }
});

Answer 1

看起来您正在使用Laravel Blade模板引擎，它是在服务器中编译的。 因此，JavaScript无法更改它。 并且它们不能一起使用。

这样的代码是错误的

 @if($articletag->tag == $(this).text()) 

因此您的需求无法实现。 也许您应该改变想法，找到另一种方式。