Question

所以我检查normalize以添加规范化库...

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

我检查jQuery并在规范化后添加jQuery源...

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

但如果我取消选中normalize，我希望它删除normalize链接，如果我再次检查它，我想在jQuery之后添加normalize ...

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

我想要发生什么，但是当我添加说AngularJS然后规范化时，它会假设显示这样......

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />

但我得到......

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />

基本上我检查的是我希望在我检查的其他库之后添加该库。

我的jQuery是......

// Add/Remove Library from Checkbox
$(".check").on("change", function() {

  // Join All Checked Libraries
  $(".full-library-code").val(function() {
    return $.map($(".check:checked").next().next(), function (el) {
      return el.value;
    }).join('\n');
  });
});

我相信这可以在没有Codemirror的情况下发生，我相信这个问题正在发生，因为我的jtml是如何用我的jQuery构建的，但我不知道如何解决它。

＆＃13;

$(document).ready(function() {
  // Add/Remove Library from Checkbox
  $(".check").on("change", function() {

    // Join All Checked Libraries
    $(".full-library-code").val(function() {
      return $.map($(".check:checked").next().next(), function (el) {
        return el.value;
      }).join('\n');
    });
  });
});

＆＃13;

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<input type="checkbox" class="check" id="norm"> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br>
<input type="checkbox" class="check" id="jquery"> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br>
<input type="checkbox" class="check" id="ang"> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>

＆＃13;

Answer 1

每次您应查看所点击的复选框是否已被选中，而不是循环显示所有复选框。或者＆＃39;取消选中＆＃39;。在此基础上，添加或删除文本。

＆＃13;

pch

＆＃13;

$(document).ready(function() {
    $(".check").on("change", function() {
        var textarea = $('.full-library-code');
        var value = $(this).nextAll('input:first').val() + '\n';
        
        if( $(this).prop('checked') == true )
            textarea.val( textarea.val() + value );
        else
            textarea.val( textarea.val().replace( value, "") );
    });
});

＆＃13;

/* only for demo readability */
textarea { width: 500px; height: 200px; }

＆＃13;

注意：请注意A. Wolff的评论，您可能希望将AngularJS添加为脚本...同样，在我替换<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="check" id="norm" /> <label for="norm">Normalize</label> <input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br /> <input type="checkbox" class="check" id="jquery" /> <label for="jquery">JQuery</label> <input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br /> <input type="checkbox" class="check" id="ang" /> <label for="ang">Angular JS</label> <input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br /> <textarea class="full-library-code" placeholder="full library's code"></textarea>和< {{}}的值中1}}和>

Answer 2

如果您以相反的顺序获取元素，只需在reverse()之前使用join()方法，就像这样：

// Join All Checked Libraries
$(".full-library-code").val(function() {
  return $.map($(".check:checked").next().next(), function (el) {
     return el.value;
  }).reverse().join('\n');
});

Answer 3

我从您的问题中理解的是，您希望稍后检查的库稍后出现在textarea中。这是你如何做到的

$(".check").on("change", function() {
  var $textArea = $(".full-library-code");
  var fullLibraryCode = $textArea.val();
  var thisValue = $(this).next().next().val() + "\n";

  if (this.checked) {
    $textArea.val(fullLibraryCode + thisValue);
  } else {
    $textArea.val(fullLibraryCode.replace(thisValue, ""));
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm">
<label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' />
<br>
<input type="checkbox" class="check" id="jquery">
<label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' />
<br>
<input type="checkbox" class="check" id="ang">
<label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' />
<br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>

从复选框添加/删除值

3 个答案: