Hi,
I want to have a series of shapes (say circle1, circle2, circle3, etc.), and I want them to show a box onClick. However, I would like to not have to create a seperate box for each one. Therefore, I would like to connect it so that if the circle10 is clicked, for example, then I want to show the circle10 (or whatever) item in the dataset — a specific item in my dataset.
I know this is tall order and I could just be making stuff up, but thanks for any help you can provide!!
Hi 🖐
You can create a dynamic onClick() event handler, let's say you have couple of shapes (circles) that you want to show their box when they're clicked, for example, when circle1 is clicked, show box1, and so on, if that's what you want, then do the following.
For elements that share similar IDs and behavior, you can create dynamic event handlers.
let elementsNum = 5 // Or whatever their number is for (let i = 1; i <= elementsNum; i++) { $w(`#circle${i}`).onClick( (event) => { $w(`#box${i}`).show(); }) }This will create an onClick() event handler for each of your elements (5), or more without making the code so long and hard to debug.
Just remember, elementsNum is the number of elements that share similar IDs and behavior, like (circle1, circle2, etc..) and (box1, box2, box3, etc..).
Hope that helped~!
Ahmad
I used Ahmad's answers plus my own research. Thanks everyone!
import wixLocation from "wix-location"; import wixData from 'wix-data'; $w.onReady(function () { let elementsNum = 6 $w("#dataset1").onReady( () => { for (let i = 1; i <= elementsNum; i++) { $w(`#vectorImage${i}`).onClick( (event) => { $w("#dataset1").setCurrentItemIndex(elementsNum-i) }) } } ); });Using Ahmad's answer, I think I can combine that with the setCurrentItemIndex function to work with my need. Thank you everyone!
Hello ClimaActivist,
i am not sure, but i think that this site has exactly the behaviour, what you are searching for.
https://russian-dima.wixsite.com/meinewebsite/home-1
function init() { $w('#table1').onRowSelect(event => { const currentRowIndex = event.rowIndex; console.log(currentRowIndex); const item = $w('#dataset1').getCurrentItem(); const URL = item.url; console.log(URL); const myURL = item["link-tutorials-title"]; const contentLink1 = item["link-tutorials-title"]; console.log(myURL); $w('#BTNgo').link = myURL; }) } export function viewresultsbutton_click(event, $w) {} export function BTNgo_click(event) { console.log($w('#dataset1').getCurrentItem().contentLink1) let visitCounter = $w('#dataset1').getCurrentItem().views if (visitCounter ==0) {visitCounter = 1} else {visitCounter = visitCounter+1} $w("#dataset1").setFieldValue("views", visitCounter) $w("#dataset1").save() .then(()=>{ wixLocation.to($w('#dataset1').getCurrentItem().contentLink1) console.log(visitCounter) }) } export function BOXlink1_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink1), wixLocation.to($w('#dataset1').getCurrentItem().contentLink1)} export function BOXlink2_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink2), wixLocation.to($w('#dataset1').getCurrentItem().contentLink2)} export function BOXlink3_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink3), wixLocation.to($w('#dataset1').getCurrentItem().contentLink3)} export function BOXlink4_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink4), wixLocation.to($w('#dataset1').getCurrentItem().contentLink4)} export function BOXlink5_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink5), wixLocation.to($w('#dataset1').getCurrentItem().contentLink5)}