I had 2 buttons with 2 different trigger classes before and these would fire other class changes when clicked…but now I’ve changed this to 1 button, so I’m trying to toggle classes on 1 button.
The code will work for 1 sequence - When the button is clicked, the assigned class events happen. But when the button is clicked a second time, the new class events don’t take place.
I know the code isn’t clean and right! The else statement was only 1 statement, but in a vein attempt of trying to get it to work, I extended the code to what you see below. Can’t see why this isn’t toggling classes =/
<div id="step1-trigger" class="trigger-f"><button data-text-swap="Sell at an Auction" id="step1-select-button" class="trigger-a ui-state-default ui-corner-all">Sell at a Fixed Price</button></div>
As there’s jquery UI classes on the button, I thought I’d wrap the button and apply the class changes to the div…should be fine right?
When this is clicked it should be firing the following (which was fine before)…both trigger-a / trigger-f have their own seperate rules like
Must be a problem with the logic then. I removed trigger-a from class of button.
So container class changes on click, trigger-f rules below are triggered once, but trigger-a rules wont fire. I’ll reproduce the problem somewhere and send a link
I’m sure there’s an easier way to do this. I’m having problems recreating so it makes sense! Think it depends on when the class changes and when the click is registered…
Ahh I see. I’ll try to clearly explain the aim here then…
Before I had two buttons. 1 with class trigger-a and 1 with class trigger-f. On click they would execute the js class changes in selector and selector1 (can see these on server)
But now, the 2 buttons have been changed into 1 button. The 1 button label will change via data-text-swap…this is fine. But now I need to be able to assign a class for each label change, so the button triggers the correct selector.
If label is auction, class trigger-a should be active and on click the selector js should fire which changes/hides some fixed sale form properties. And in reverse, if button label is fixed sale, it should be assigned the trigger-f class which on click changes/hides some auction form properties
suppose it would be ideal to apply the class in the text-swap…html & js for this is below. I avoided trying to make changes to the button class, as it already has 2 jq-ui classes.
<button data-text-swap="Sell at an Auction" id="step1-select-button" class="ui-state-default ui-corner-all">Sell at a Fixed Price</button>
<script>
$("#step1-select-button").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("Sell at a Fixed Price"));
} else {
el.data("Sell at a Fixed Price", el.text());
el.text(el.data("text-swap"));
}
});
</script>
Wouldn’t it be simpler just to do something like this.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.auction{display:none}
</style>
</head>
<body>
<button data-text-swap="Sell at an Auction" id="step1-select-button" class="ui-state-default ui-corner-all">Sell at a Fixed Price</button>
<div class="sale">Sale form properties</div>
<div class="sale">Sale form properties</div>
<div class="sale">Sale form properties</div>
<div class="sale">Sale form properties</div>
<div class="sale">Sale form properties</div>
<div class="auction">Auction form properties</div>
<div class="auction">Auction form properties</div>
<div class="auction">Auction form properties</div>
<div class="auction">Auction form properties</div>
<div class="auction">Auction form properties</div>
<div class="auction">Auction form properties</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$("#step1-select-button").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("Sell at a Fixed Price"));
$('.sale').show();
$('.auction').hide();
} else {
el.data("Sell at a Fixed Price", el.text());
el.text(el.data("text-swap"));
$('.sale').hide();
$('.auction').show();
}
});
</script>
</body>
</html>
If this was the initial plan, probably yes. But now there’s about 10-15 hide/show rules for both trigger selections. For example an auction form may use some fixed sale labels/input… and vice versa.
maybe if selectors said alogn the lines of
if step1-select-button label value == “blabla”{
document get element by id…change class.
then there’s no class change of button needed…just a label check
I don’t think you need to get that complicated as you are only showing and hiding elements based on one of two states. Just add the classes to the ones that need hiding or showing and leave any common ones without classes so that they remain visible for both.
Alternatively just group all the sale inputs in one div and all the auction inputs in another div and then just hide and show each div as required.
I think you may need to give a more complex example if the above criteria doesn’t work or meet your requirements. It seems you only have two states to work with so I can’t see how it needs to be more complex.
