CODEWITHSUNDEEP
javascriptjquery
arickanjass
arickanjass

Reputation: 1

Change object value jquery

I have a problem in my jQuery. Can someone help me fix it? I have my code on jsfiddle here:

http://jsfiddle.net/tbk5tuj9/

My problem is, I want to change image source_image_width and height to other size. Is it possible on my code?

This is my jQuery:

$(function () {
    var value = {};

    value = {
        "zoom_element": '#zoom',
        "magnifier_opacity": 1,
        "source_image_width": 200,
        "source_image_height": 200,
    };

    $(".klik").click(function () {
        console.log("Klik");
        value = {
            zoom_element: '#zoom',
            magnifier_opacity: 1,
            source_image_width: 2,
            source_image_height: 100,
        };
    });

    $('#etalage').etalage(value);

    console.log(value);
});

Upvotes: 0

Views: 50

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074148

Your code is completely replacing the value object, successfully. The only (real) issue is that your console.log is outside your click handler. If you want to see value as it is after clicking it, you need to move that into your click handler.

Lesser issues are that you're creating an object here:

var value = {};

...that you then throw away entirely and replace here:

value = {
    "zoom_element": '#zoom',
        "magnifier_opacity": 1,
        "source_image_width": 200,
        "source_image_height": 200,
};

Those could be combined, or just leave the = {} off the var line.

Also, if you just want to modify your object, you can just assign to its properties, e.g.:

value.magnifier_opacity = 1;

Example that just moves the console.log but still replaces the entire object:

$(function() {
  var value = {};

  value = {
    "zoom_element": '#zoom',
    "magnifier_opacity": 1,
    "source_image_width": 200,
    "source_image_height": 200,
  };

  $(".klik").click(function() {
    snippet.log("Klik");
    value = {
      zoom_element: '#zoom',
      magnifier_opacity: 1,
      source_image_width: 2,
      source_image_height: 100,
    };
    snippet.log(JSON.stringify(value)); // <========= Moved and
                                        // adjusted for demo
  });

  // $('#etalage').etalage(value); Commented out for demo
});
<input type="button" class="klik" value="Click me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Upvotes: 1

Related Questions