突出显示具有相同非空值的输入

时间:2016-10-21 07:44:37

标签: javascript jquery

我想检查文本框是否具有相同的值。如果它们具有相同的值,则突出显示它们,但没有值的文本框除外。

这是一个示例小提琴: http://jsfiddle.net/qjqa1et2/61/

这是我当前的jQuery代码:

'use strict';

angular.module('myApp.userItems.insert', 
['oitozero.ngSweetAlert'])


.directive("fccpinsert", [ '$parse', 'SweetAlert', '$timeout' , function($parse, SweetAlert) {
var template = 
'<button class="btn btn-primary waves-effect" ng-click="insert($event)">Insert directive</button>';


return {
    restrict: "E",
    replace: true,
    scope: {
        vdata:'='
    },
    template: template,

    controller: ['$scope', '$http', '$compile', '$element', function($scope, $http, $compile, $element) {

        // Root path towards templates folder
        $scope.prefix = "views/summernote/tpls/";

        // Inserts directive into the text field
        $scope.insert = function(event){
            var filename = "template1";

            var path = $scope.prefix + filename + ".html";

            // If template is found
            var successCallback = function(response){

                var tpl = $compile(response.data)( $scope );
                console.log(tpl);

                $element.append(tpl);

                //class is : note-editable panel-body
                var documentResult = document.getElementsByClassName("note-editable panel-body");
                console.log('document.getElementsByClassName: ', documentResult);

                var wrappedDocumentResult = angular.element(documentResult);
                console.log('angular.element: ', wrappedDocumentResult);

                wrappedDocumentResult.append(tpl);


            };  

            var errorCallback = function(response){
                console.log(response);
                SweetAlert.swal("File not found", response.config.url + ": " + response.data, "error");
            };

            $http.get(path, {}).then(successCallback, errorCallback);




        };
    }],

    link: function($scope, $element){
    }
};
}]);

问题是没有值的文本框仍然会突出显示。

3 个答案:

答案 0 :(得分:0)

你可以这样做:

    return inputs.not(this).filter(function() {
        return (this.value && (this.value === el.value));
    }).length !== 0;

小提琴: http://jsfiddle.net/maverickosama92/qjqa1et2/62/

答案 1 :(得分:0)

您可以使用!el.value检查元素是否为空(在这种情况下相当于el.value == '')。如果是这样,我们可以通过返回false来立即排除它(不检查其他元素)。

var inputs = $('input');

inputs.filter(function(i,el){
    if (!el.value) return false; // <= new line
    return inputs.not(this).filter(function() {
        return this.value === el.value;
    }).length !== 0;
}).addClass('red');

Here's a fiddle

答案 2 :(得分:0)

var inputs = $('input'); 

inputs.filter(function(i,el) {
    if(el.value!="") {
        return inputs.not(this).filter(function() { 
            return this.value === el.value;
        }).length !== 0;
     } 
}).addClass('red');