如果检查，使用时计数器不工作

Question

当我点击我的按钮时，我试图检查标签类别是否已创建

($('#label-' + category_name).length === 0) {

出于某种原因，如果我使用($('#label-' + category_name).length === 0) {，它会停止计数器。

  

问题：如果($('#label-' + category_name).length === 0) {

，请如何确保可以让计数器正常工作？

如果有帮助，我也会使用codeigniter框架工作

示例应如何执行here

<script type="text/javascript">
var counter = 0;

$(document).on('click', '.category_title', function(e){ 

    e.preventDefault();

    var category_name = $(this).attr('data-name');
    var category_id = $(this).attr('data-id');

    if ($('#label-' + category_name).length === 0) {

        switch(counter) {
            case 0:
                element = 'label-default';
                break;
            case 1:
                element = 'label-primary';
                break;
            case 2:
                element = 'label-success';
                break;
            case 3:
                element = 'label-info';
                break;
            case 4:
                element = 'label-warning';
                break;
        }

        counter = (counter + 1) % 5;    

        html = '';
        html += '<li id="label-'+category_name+'">';
        html += '<span class="label ' + element + '">';
        html += category_name;
        html += '</span>';
        html += '</li>';

        $('.categories ul').append(html);

    }

    $('.categories-panel').html("");
});
</script>

完整代码

<?php if ($categories) {?>
    <div class="panel panel-default">
        <div class="panel-body">
            <?php 
            foreach (array_chunk($categories, 4) as $category) {
            ?>
                <div class="row">
                    <?php 
                    foreach ($category as $category) {
                    ?>
                        <div class="col-sm-4">
                            <div class="media">
                                <div class="media-left">
                                    <a href="#"></a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading" style="cursor: pointer;">
                                        <span 
                                            class="category_title"
                                            id="category_title" 
                                            data-name="<?php echo $category['name'];?>" 
                                            data-id="<?php echo $category['category_id'];?>"
                                        >
                                            <?php echo $category['name'];?>
                                        </span>
                                    </h4>
                                    <?php 
                                    echo $category['description'];
                                    ?>
                                </div>
                            </div>
                        </div>
                    <?php
                    }
                    ?>
                </div>
            <?php
            }
            ?>
        </div>
    </div>
<?php
}
?>

<script type="text/javascript">
var counter = 0;

$(document).on('click', '.category_title', function(e){ 

    e.preventDefault();

    var category_name = $(this).attr('data-name');
    var category_id = $(this).attr('data-id');

    if ($('#label-' + category_name).length === 0) {

        switch(counter) {
            case 0:
                element = 'label-default';
                break;
            case 1:
                element = 'label-primary';
                break;
            case 2:
                element = 'label-success';
                break;
            case 3:
                element = 'label-info';
                break;
            case 4:
                element = 'label-warning';
                break;
        }

        counter = (counter + 1) % 5;    

        html = '';
        html += '<li id="label-'+category_name+'">';
        html += '<span class="label ' + element + '">';
        html += category_name;
        html += '</span>';
        html += '</li>';

        $('.categories ul').append(html);

    }

    $('.categories-panel').html("");
});
</script>

ask.php

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
    </div>

    <?php 
    echo form_open(
        'questions/ask/submit', 
        array(
            'id' => 'post-form'
        )
    );
    ?>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
                <input 
                    type="text" 
                    name="ask_title" 
                    id="ask_title" 
                    placeholder="Question Title" 
                    class="form-control" 
                />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
                <textarea 
                    name="ask_message" 
                    id="ask_message" 
                    class="form-control" 
                    rows="15" 
                    placeholder="Your message..."
                ></textarea>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="categories">
                <ul class="list-inline"></ul>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
                <input 
                    type="text" 
                    name="category_name" 
                    id="category_name" 
                    class="form-control" 
                    placeholder="Choose category" 
                />
                <div class="categories-panel"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
                <input 
                    type="submit" 
                    name="submit_button" 
                    id="submit_button" 
                    class="btn btn-default" 
                />
            </div>
        </div>
    </div>

    <?php echo form_close();?>
</div>

<script type="text/javascript">
    $( document ).ready(function() {
        $("#category_name").on('keyup', function(e){
            $.ajax({
                url: '<?php echo base_url('questions/ask/getcategories');?>',
                type: "post",
                data: {
                    category_name: $('#category_name').val()
                },
                dataType: 'json',
                success: function(json){
                    $('.categories-panel').html(json);
                }
            });
        }); 
    });     
</script>

Answer 1

不幸的是，你的答案不够明确，但我想以下代码可以帮到你。第一次按下按钮时，if语句有效，因为没有给定ID的标签。第二次，它没有，因为已经存在具有给定ID的元素。

我猜你的问题就是你设置ID的方式。我尝试了你的代码，我发现声明'<li id="label-'+category_name+'">'就是问题。

例如，如果category_name是这样的：This Is A String标签ID将是这样的：<label class="label-This Is A String">...</label>阻止jQuery与元素匹配。

我在我的案例中所做的是用-替换空格并将字符串小写（小写不重要），这样，jQuery现在可以匹配标签ID。

另请注意，如果您使用带有特殊字符的字符串，您可能还需要替换它们。

(
  function($, window, undefined) {

    var counter = 0;
    var button = $( '.category_title' );
    
    if ( 0 < button.length ) {
      button.on(
        'click',
        function ( e ) {
          e.preventDefault();
          
          var me = $( this );
          var category_name = me.attr( 'data-name' );
          var category_id = me.attr( 'data-id' );
          var id = category_name.replace( /\s+/g, '-' ).toLowerCase();
          var label = $( '#label-' + id );
          var label_class = '';
          
          if ( 0 === label.length ) {
            switch ( counter ) {
              case 0:
                label_class = 'label-default';
                break;
              case 1:
                label_class = 'label-primary';
                break;
              case 2:
                label_class = 'label-success';
                break;
              case 3:
                label_class = 'label-info';
                break;
              case 4:
                label_class = 'label-warning';
                break;
            }
          }
          
          counter = (counter + 1) % 5;

          html = '';
          html += '<li id="label-{id}">';
          html += '<span class="label {class}">';
          html += '{text}';
          html += '</span>';
          html += '</li>';
          
          html = html
                  .replace( /\{id\}/, id )
                  .replace( /\{class\}/, label_class )
                  .replace( /\{text\}/, category_name );

          $('.categories ul').append(html);
          
        }
      );
    }

  }
)(jQuery, this);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="category_title" data-name="This Is A Test" data-id="this-is-the-id">Click Me</a>
<div class="categories">
  <ul></ul>
</div>

希望这就是你要找的东西。

请注意，我还对此代码进行了简短的重构，以使其与您网站中的其他代码隔离。

Answer 2

立即工作我现在所做的是将此脚本移到我的codeigniter中的主要ask.php视图

我添加了

e.stopPropagation();
e.preventDefault();

if ($('span[id="' + category_name + '"]').length > 0) {
    return false;
}

脚本

<script type="text/javascript">
var counter = 0;

$(document).on('click', '.category_title', function(e){ 

    var category_name = $(this).attr('data-name');

    e.stopPropagation();
    e.preventDefault();

    if ($('span[id="' + category_name + '"]').length > 0) {
        return false;
    }

    switch(counter) {
        case 0:
            element = 'label-default';
        break;
        case 1:
            element = 'label-primary';
        break;
        case 2:
            element = 'label-success';
        break;
        case 3:
            element = 'label-info';
        break;
        case 4:
            element = 'label-warning';
        break;
    }

    counter = (counter + 1) % 5;    

    html = '';
    html += '<li>';
    html += '<span id="' + category_name + '" class="label ' + element + '">' + category_name + '</span>';
    html += '</li>';

    $('.categories ul').append(html);

    //$('.categories-panel').html("");
});
</script>