如何在jQuery中添加和删除属性click事件？

Question

function myFunction(e) {
	var currentTab = $(e).data("target");

	$(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
	if ($(currentTab).is(":hidden")){
		$(currentTab).children('input').attr("name", 'filterMode');
		$(currentTab).children('input').attr('value', currentTab);
		$(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
		$(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
	}
}

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


<div class="panel panel-primary searchPanel">
	<ul class="nav nav-list panel-tabs filterButtons">
		<li>
			<button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
					onclick="myFunction(this)">Karar No İle
			</button>
		</li>
	</ul>
	<div class="panel-body">
		<div class="tab-content">
			<div class="tab-pane" id="kararNo">
				<input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
				<div class="input col-sm-5">
					<input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
				</div>
			</div>
		</div>
	</div>
</div>

此输入在第一次单击时打开，在第二次单击时关闭。

我要在打开时关闭添加的属性时删除。你能帮我吗？

Answer 1

function myFunction(e) {
    var currentTab = $(e).data("target");
// check element visible
 if($('#kararNo:visible').length == 0){
     console.log("visible");
  }else{
    console.log("hidden");
  }
  
  //end element visiblity check
    $(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
    if ($(currentTab).is(":hidden")){
    console.log("hidden");
        $(currentTab).children('input').attr("name", 'filterMode');
        $(currentTab).children('input').attr('value', currentTab);
        $(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
        $(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
    }
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary searchPanel">
    <ul class="nav nav-list panel-tabs filterButtons">
        <li>
            <button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
                    onclick="myFunction(this)">Karar No İle
            </button>
        </li>
    </ul>
    <div class="panel-body">
        <div class="tab-content">
            <div class="tab-pane" id="kararNo">
                <input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
                <div class="input col-sm-5">
                    <input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
                </div>
            </div>
        </div>
    </div>
</div>

只需使用您的已知ID来检查可见性，如下所示。

if($('#kararNo:visible').length == 0){
     console.log("visible");
  }else{
    console.log("hidden");
  }

Answer 2

function myFunction(e) {
    var currentTab = $(e).data("target");
    var filters = ['filterMode', 'filterBegin','filterEnd'];

    if($(currentTab).is(':visible')){
        $(currentTab).children('input').removeAttr('value');
        $(currentTab).find('input').map(function(index,input){
            $(input).removeAttr("name");
        });
        $(currentTab).siblings().find('input').map(function(index,input){
            $(input).removeAttr("name");
        });
        $(currentTab).hide('slow');

    }else{
        $(currentTab).children('input').attr('value', currentTab);
        $(currentTab).find('input').map(function(index,input){
            $(input).attr("name", filters[index]);
        });

        $(currentTab).siblings().find('input').map(function(index,input){
            $(input).removeAttr("name");
        });
        $(currentTab).show('slow').siblings().hide('slow');

    }
}

我的问题的解决方案就是这样。非常感谢