Как я могу отобразить, какой элемент внутри массива объектов щелкнул пользователь, используя jQuery?

Я пытаюсь отобразить OfferName при нажатии пользователем на список изображений, каждое из которых имеет свои собственные данные (массив объектов), используя jQuery. Я добился этого с помощью простого JS, но хочу знать, как добиться этого с помощью jQuery.

Как сделать так, чтобы при нажатии пользователем на изображение в консоли появлялся индивидуальный и правильный OfferName? Это меня сильно смутило, хотя я пытался реконструировать простой JS :(.

Можно предположить, что массив объектов выглядит следующим образом:

var offers = [ {
    id: 5933,
    desc: "game",
    OfferName: "blitz",
    Template: "nonfeatured",
    SortIndex: 0
  }, {
    id: 5934,
    desc: "game",
    OfferName: "blitz  - 2",
    Template: "featured",
    SortIndex: 0
  }, {
    id: 5935,
    desc: "game",
    OfferName: "blitz  - 3",
    Template: "special",
    SortIndex: 0
  }];

  $(".items").on("click", function () {
    var offerName = "";

    for(var i = 0; i < offers.length; i++) {
        offerName = offers[i].OfferName;
        $(this).on("click", function (offerName) {
            console.log("user clicked " + offerName);
        });
    }
  }