Question

开发人员，我知道这是对其他人的重复问题，但是我想了解我的问题的更多细节，

问题：如何以条件方式在html中添加数据？

场景：如果condition_direction的值为Right，则沿正确的方向获取所有数据，否则转到Left。

我在这里有我的职能：

    $(document).ready(function(){
    $.ajax({
        url:'http://localhost:8000/api/story',
        dataType: "json",
        contentType: "application/json",
        success:function(response) {
            console.log(response);

            var historytable = response[0].historytable;
            $.each(historytable, function (index, el) {

            var stringify_historytable = jQuery.parseJSON(JSON.stringify(el));
            var condition_direction = stringify_historytable['content_section'];
            var condition_content_title = stringify_historytable['content_title'];

            console.log(condition_direction);

            var data;

            data += "<li>" if(condition_direction == 'Right') {
                'Go to Right'
            }else{
                'Go to Left'
            }

            "</li>";




            $('#time_line_data').html(data);

          });
        },
        error:function(response) {
            console.log(response);
        }
    });
});

我的HTML：

<ul class="timeline" id="time_line_data">

</ul>

我已经为我的laravel项目解决了这个问题我用这段代码来解决这个问题。

问题：如何将此代码转换为jquery语言？

@foreach($historytable as $history_content)
    <li>
        @if($history_content->content_section == 'Right')
            <div class="direction-r">
                <div class="flag-wrapper">
                    <span class="hexa"></span>

                    <span class="time-wrapper"><span class="time">{{$history_content->content_title}}</span></span>
                </div>
                <div class="desc">
                    {!! $history_content->content !!}
                </div>
            </div>


        @else
            <div class="direction-l">
                <div class="flag-wrapper">
                    <span class="hexa"></span>

                    <span class="time-wrapper"><span class="time">{{$history_content->content_title}}</span></span>
                </div>
                <div class="desc">
                    {!! $history_content->content !!}
                </div>
            </div>
        @endif  
    </li>
@endforeach

Answer 1

问题在于您使用串联的方式。应该是：

data += "<li>" + ((condition_direction == 'Right') ? 'Go to Right' : 'Go to Left') + "</li>";

在这种情况下，请使用三元运算符。简单的三元运算符具有以下语法：

<condition> ? <expression if true> : <expression if false>

代码段

data = "";
condition_direction = "Right";
data += "<li>" + ((condition_direction == 'Right') ? 'Go to Right' : 'Go to Left') + "</li>";
console.log(data);

data = "";
condition_direction = "Left";
data += "<li>" + ((condition_direction == 'Right') ? 'Go to Right' : 'Go to Left') + "</li>";
console.log(data);

Answer 2

您可以左右使用float。这可能对您有帮助

      var data;
      if(condition_direction == 'Right') {
          data += "<li style='float:right;'>"; 
      }
      else {
          data += "<li style='float:left;'>" >            
      }
      data+="your content";
      data+="</li>";

      $('#time_line_data').html(data);

或者您可以编写一行代码

      data += "<li style='float:"+ condition_direction.toLowerCase()+"'>";

如何使用条件附加HTML数据

2 个答案: