how to add and remove attributes click event in 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>

This inputs open in first click, second click closes.

I want to delete when I close the added attributes when I open. can you help me please ?

you can use removeAttr() like $('#divid').removeAttr("title") — Shiv Kumar Baghel
– Shiv Kumar Baghel, Commented Oct 16, 2018 at 11:00

Ömer · Accepted Answer · 2018-10-17 08:29:35Z

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

    }
}

solution of my question, that's it. Thank's a lot

Sumesh TG · Accepted Answer · 2018-10-16 11:16:09Z

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>

Just use your known id to check the visibility as follows.

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

Collectives™ on Stack Overflow

how to add and remove attributes click event in jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related