Javascript keybinding to all links of a particular class

Claretta

So the answers on my keybinding post last year were very helpful, and I now have a working keyboard control system in my game. Using something like:

$(document).on("keydown", function (event) {
	 if (event.which === 87) {
		$("#passages")
	.find('a[data-passage="War Room"], a[data-passage="War Room 2"], a[data-passage="War Room 3"], a[data-passage="War Room 4"]')
	.trigger("click");
	}
});

However, you can see how messy this can get. If I have 31 different War Room passages (1 for each game turn), then I have to add them all to the javascript in this method. I don't mind doing that, but it seems a pain in the ass, and I'm concerned about possible performance impacts if I have to name every single link in the game in the script passage.

I'd like to bind the key instead to certain class name, so if I surround each war room link in a <span class="warroom">War Room 31</span> pressing "w" will click that link without me needing to specify the individual link name in the JavaScript.

I've searched around for how to do this but am not sure that the answers I found on StackOverflow are relevant to Twine.



The other way might be to overwrite the JavaScript keybind each turn so that on turn 31 it is only searching for War Room 31 and not War Room 1.

I assume then I'd just put the following script in the between turns passages:

$(document).on("keydown", function (event) {
	 if (event.which === 87) {
		$("#passages")
	.find('a[data-passage="War Room 31"]')
	.trigger("click");
	}
});

And this would overwrite the javascript in the script passage?

Claretta

With good old trial and error I solved this myself, I think:

	if (event.which === 52) {
		$(".warroom")
	.find('a')
	.trigger("click");
	}

This code simply searches for all links within a particular span. Of course you don't use the span more than once a page...