Как добавить и удалить атрибуты события нажатия в JQuery?

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");
    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');

    }
}

решение моего вопроса, вот и все.Спасибо большое

Answer 2

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>

Просто используйте свой известный идентификатор, чтобы проверить видимость следующим образом.

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