0

Here is the FIDDLE you can fork and work on

Given a list of

<a href="#" class="iconList" id="myDoc_aaa">...</a>
<a href="#" class="iconListChecked" id="myDoc_bbb">...</a>
<a href="#" class="iconList" id="myDoc_ccc">...</a>

I want to assign the * key to trigger click on each link in turn and ctrl-* to trigger click on all. I do not want to toggle the class, since there is a script that needs to run when the link is clicked

QUESTION: Can you help me with the selectors and what else (data attribute?) to loop over the links one at a time on * and all at once on ctrl-star

So when you

hit *, the first link is triggered (and the script changes the class to iconListChecked),

hit * star again and the second link is triggered (unchecking it),

hit * and the third is triggered,

hit * and we wrap and the first is triggered (unchecking it)


hit ctrl-star and all not-checked links are triggered

FIXED: $(".iconList").trigger("click");


(My fiddle currently only handles the * on the numeric keyboard - I have a separate question for that here)

2 Answers 2

1
+50

http://jsfiddle.net/GtXMW/28/

// ... removed unedited part..

// Function to handle *
function toggleFirst() {
    var $candidates = $('.iconList,.iconListChecked');
    var $nottoggled = $candidates.not('.rw_toggled').first();
    if (!$nottoggled.length) {
        // There is no non-toggled element any more.
        // Remove class from all links
        $candidates.removeClass('rw_toggled');
        $nottoggled = $candidates.first();
    }
    // Add temporary class, trigger click
    $nottoggled.addClass('rw_toggled').click();
    console.log("*");
}
// Function to handle ctrl+*
function toggleAll() {
    console.log("ctrl+*");
    $(".iconList").click();
}    
$(document).ready(function() {
    // Handle Ctrl+* and * 
    $(document).keypress(function(e) {
        var $this = $(this);
        if (e.which === 42) { // '*'.charCodeAt(0) === 42
            if (!$this.data('rw_star_pressed')) {
                $this.data('rw_star_pressed', true);
                if (e.ctrlKey) { // Ctrl + *
                    toggleAll();
                } else {             // Just *
                    toggleFirst();
                }
            }
        }
    }).keyup(function() {
        $(this).removeData('rw_star_pressed');
    });

    // ... rest of your original code...
});
2
  • Nice one too - thanks. And you fixed the number row *. Dilemma - who to accept
    – mplungjan
    Mar 24, 2012 at 21:44
  • @mplungjan Just pick the one which provided the most complete answer to the question. That's the purpose of it.
    – Rob W
    Mar 24, 2012 at 21:45
1

Seeing as how you've solved part of it yourself, I believe this should help with the rest: http://jsfiddle.net/D4PhQ/4/

By using the class next it tracks the next one to click and then uses .next() to find the next a element in the page.

function toggleFirst() {
    console.log("*");
    var n = $(".next").first();
    n.click();
    n.removeClass("next");
    n.nextAll("a").addClass("next");
    if (n.nextAll("a").length === 0) $("a").addClass("next");
}
3
  • Thanks for looking. I get n.next.addClass is not a function
    – mplungjan
    Mar 23, 2012 at 15:33
  • @mplungjan Fixed it, try again. Mar 23, 2012 at 18:20
  • Thanks - got a more complete answer from Rob.
    – mplungjan
    Mar 24, 2012 at 21:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.