Hello,
When an interaction is added with the action of execution a javascript function (which receives %brx% as a parameter) on an element present in a query loop, it happens that instead of the respective function being executed on each element of the query, individually, it is executed on all of them because they have the same class. For example, in my case, I display some product cards that must flip when a button is pressed. The problem is that they flip all of them, not just the one that was clicked. I can’t figure out if I’m doing something wrong or if it’s a bug.
URL: Link to a page that illustrates this issue
In the url t seems that your are not using the Javascript Action but the Set Attribute Action.
Anyway the problem is that the target selector (.back-card) is too generic, it selects every card of the loop, and it is expected CSS behavior.
You need to narrow the selector to the “.back-card” of the pressed card.
I think you need to use Javascript Action to handle that and select the right DOM element.
function handleFlipCard( brxParam ) {
const backCard = brxParam?.source?.parentElement.querySelector('.back-card');
if (backCard) {
backCard.classList.toggle('visible');
}
}
1 Like
Thank you for the response, the JavaScript action is correctly set, not on the card, but on the button inside it. I modified the action so instead of using a class as a selector, it uses the element itself. This way, I could access the specific element of each interaction.
function handleFlipCard(brxParam) {
const card = brxParam?.source?.closest('.flip-card');
if (card) {
card.classList.toggle('is-flipped');
}
}
Good job! great that you solved
1 Like
