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

时间:2017-08-22 04:42:23

标签: javascript jquery html angularjs

每当用户从下拉框中选择一个项目时,我想在类中添加ifforeach语句。
应该添加的标签是:

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

$(this).text()是用户点击下拉框的文字。这些ifforeach的目的是在用户从下拉框中选择项目时根据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
    }
});

1 个答案:

答案 0 :(得分:0)

看起来您正在使用Laravel Blade模板引擎,它是在服务器中编译的。因此无法通过JavaScript进行更改。他们不能一起使用。

这样的代码是错误的

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

所以你的需求无法实现。也许你应该改变思路,找到另一种方式。