Is there a way to get information out of an object through a variable?

Question

This is my first time using objects, so I'm still learning JavaScript/jQuery a bit.

I have a function going on where when I click, a variable is set to the class of the image I clicked on. I want another function to run that edits a value in the object based on the previous variable. I understand that what I'm trying to do would look like this:

marri.selected = 1;

The problem I'm having is this:

// in this case, let's say I clicked on one called 'marri'
character = $(".units a").attr("class");

// what I want this to read is 'marri.selected = 1' but as any name through the variable 'character'
character.selected = 1;

So is this possible through another way?

This is very important: jQuery is NOT a programming language. Javascript is. I would strongly recommend to stay away from jQuery for as long as possible, since you could thing some jQuery code is actual Javascript when it's not. It seems like you're mixing concepts, so could you explain exactly what you want to happen on the page in simpler terms? — Jorge Solis, Mar 13 '20 at 23:02
@JorgeSolis "you could thing _(sic)_ some jQuery code is actual Javascript when it's not"...all code based on jQuery is also valid Javascript. It just wraps some common JS functionality in a bit of syntactic sugar and, in some cases, provides a shortcut to something which would be more verbose in vanilla JS, and often irons out cross-browser differences (although this is far less of an issue than it used to be, which has greatly reduced the use case for jQuery in the process.). Anyway I see no "mixing of concepts" here...what specifically were you thinking of with that remark? — ADyson, Mar 13 '20 at 23:09
@ADyson oh man, that was a horrible mistake. For the jQuery part, I know what it is, I meant it's not necessarily the best choice to start using both vanilla js and jQuery before being able to tell them apart. As for the "mixing of concepts", I wasn't sure what he meant with "what I want this to read is 'marri.selected = 1'", since it could be 'read' as in reading a value from an object property inside the function he mentioned, or just the hypothetical value on that line. — Jorge Solis, Mar 13 '20 at 23:43
@JorgeSolis to be fair, I was a little confused too, until I had read the question a few times. But now I'm fairly confident my answer below deals with what is neeed. — ADyson, Mar 13 '20 at 23:45

score 3 · Accepted Answer · answered Mar 13 '20 at 23:08

I'll assume you've probably actually got more than one character. Therefore it might make sense to maintain a list of characters in a single object. Each character's statistics would be a property of that object. That in turn would make it possible to dynamically reference the relevant property in the way you're imagining.

So let's say you've got a characters object like this:

var characters = { 
  "marri": { selected: 0},
  "someOtherCharacter": { selected: 0 }
}

You could get the character based on its class just as you wrote:

characterName = $(".units a").attr("class");

(Or, if you're responding to a click on that element, it might actually be characterName = $(this).attr("class");.)

...and then use that character value to refer to the property in your object using bracket notation:

characters[characterName].selected = 1;

Demo:

var characters = {
  "marri": {
    selected: 0
  },
  "someOtherCharacter": {
    selected: 0
  }
}


$(function() {
  $(".units a").click(function(e) {
    e.preventDefault();
    characterName = $(this).attr("class"); //slightly different to the above example - this directly gets the class of the clicked link
    characters[characterName].selected = 1;
    console.log(characters); //just to show the object has been updated
  });



});

.units a
{
  padding: 5px;
  border: 1px solid #cccccc;
  margin: 1px;
}

.units a:hover
{
  cursor:pointer;
  background-color: #cccccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="units">
  <a class="marri">Marri</a>
  <a class="someOtherCharacter">Some Other Character</a>
</div>

Is there a way to get information out of an object through a variable?

1 Answers1