Linking an object to a jquery function

时间：2019-02-18 00:44:11

标签： javascript

I am trying to link together an object in JS to a function of a button in Jquery. I've linked Jquery to my HTML so it is technically working, however, it's a specific project that is requiring the buttons to display the info. in the object. I've tried editing it on my own and I keep getting stuck and I'm not sure how to link the two. The instructions are included as well. 

 // create a JavaScript object here with the following fields: firstName, lastName, jobTitle, homeOffice
    function About(firstName, lastName, jobTitle, homeOffice, tellMeMore) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.jobTitle = jobTitle;
        this.homeOffice = homeOffice;
        this.tellMeMore = tellMeMore;
    };
    var about01 = new About("Megan", "Adams", "Customer Serice Rep", "Penn Field", "I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art.");

    // using jQuery and the object above, display the information as the appropriate button is clicked


    var button = document.querySelectorAll ('button');

    $(document).ready(function() {
        $(".button").click(function() {
            $(".name").fadeToggle(1000);
        });
    });

     $(document).ready(function() {
        $(".button1").click(function() {
            $(".job").fadeToggle(1000);
        });
    });

    $(document).ready(function() {
        $(".button2").click(function() {
            $(".office").fadeToggle(1000);
        });
    });

    $(document).ready(function() {
        $(".button3").click(function() {
            $(".more").fadeToggle(1000);
        });
    });



<!DOCTYPE html>
<html>
  <head>
     <title role="title">CEP Engineering Application</title>
     <link rel="stylesheet" type="text/css" href="styles.css" />
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  </head>
  <body>
        <article>
            <header role=banner>
         <h1>About Me</h1>
      </header>
                <img src="img/IMG_1989.jpg" alt="Megan Adams Picture" style="width:250px;height:460px; "class="img">
        <section>
         <button type="button" class="button">Name</button>
           <p class="name">Megan Adams</p>
        </section>
        <section>
           <button type="button" class="button1">Job Title</button>
           <p class="job">Customer Service Reo</p>
     </section>
     <section>
          <button type="button" class="button2">Home Office</button>
          <p class="office">Penn Field</p>
     </section>
     <section>
          <button type="button" class="button3">Tell Me More</button>
          <p class="more">I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art. </p>
      </section>
      <script src="init.js"></script>
          </article>
  </body>
</html>

4 个答案:

答案 0 :(得分：1)

我已经编辑了代码和html，并使它们更小。

现在看看属性data，并阅读注释以了解其工作原理。

 // create a JavaScript object here with the following fields: firstName, lastName, jobTitle, homeOffice
    function About(firstName, lastName, jobTitle, homeOffice, tellMeMore) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.jobTitle = jobTitle;
        this.homeOffice = homeOffice;
        this.tellMeMore = tellMeMore;
    };
    var about01 = new About("Megan", "Adams", "Customer Serice Rep", "Penn Field", "I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art.");

    // using jQuery and the object above, display the information as the appropriate button is clicked
    

    var button = document.querySelectorAll ('button');

    $(document).ready(function() {
    // present the values, 
    $("section > p").each(function(){
    // more dynamic approch
     var field = $(this).attr("data");
     var value ="";
     if (field){
     field.split(" ").forEach((x)=> {
       if (value== "")
         value = about01[x];
         else value += " " + about01[x] // firstName and lastName
     });
      $(this).html(value)
    }
  });
    
     // now you only need one method click to display toggle p 
        $(".button").click(function() {
           // you know that p exist under button
           // so go back to parent of the current object and then find the p and toggle it.
            $(this).parent().find("p").fadeToggle(1000);
        });
    });
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<article>
            <header role=banner>
         <h1>About Me</h1>
      </header>
     <img src="img/IMG_1989.jpg" alt="Megan Adams Picture" style="width:250px;height:460px; "class="img">
        <section>
         <button type="button" class="button">Name</button>
           <p data="firstName lastName" ></p>
        </section>
        <section>
           <button type="button" class="button">jobTitle</button>
           <p data="jobTitle"></p>
     </section>
     <section>
          <button type="button" class="button">homeOffice</button>
          <p data="homeOffice"></p>
     </section>
     <section>
          <button type="button" class="button">Tell Me More</button>
          <p data="tellMeMore"> </p>
      </section>
      <script src="init.js"></script>
          </article>

答案 1 :(得分：0)

是否要使用jQuery $(selector).html(value); 

// create a JavaScript object here with the following fields: firstName, lastName, jobTitle, homeOffice
function About(firstName, lastName, jobTitle, homeOffice, tellMeMore) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.jobTitle = jobTitle;
  this.homeOffice = homeOffice;
  this.tellMeMore = tellMeMore;
};
var about01 = new About("Megan", "Adams", "Resolutions Specialist", "Penn Field", "I have been working at HomeAway in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art.");
$(".name").html(`${about01.firstName} ${about01.lastName}`);
$(".job").html(about01.jobTitle);
$(".office").html(about01.homeOffice);
$(".more").html(about01.tellMeMore);

// using jQuery and the object above, display the information as the appropriate button is clicked


var button = document.querySelectorAll('button');

$(document).ready(function() {
  $(".button").click(function() {
    $(".name").fadeToggle(1000);
  });
});

$(document).ready(function() {
  $(".button1").click(function() {
    $(".job").fadeToggle(1000);
  });
});

$(document).ready(function() {
  $(".button2").click(function() {
    $(".office").fadeToggle(1000);
  });
});

$(document).ready(function() {
  $(".button3").click(function() {
    $(".more").fadeToggle(1000);
  });
});
button {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <title role="title">CEP Engineering Application</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<body>
  <article>
    <header role=banner>
      <h1>About Me</h1>
    </header>
    <img src="img/IMG_1989.jpg" alt="Megan Adams Picture" style="width:250px;height:460px; " class="img">
    <section>
      <button type="button" class="button">Name</button>
      <p class="name">Megan Adams</p>
    </section>
    <section>
      <button type="button" class="button1">Job Title</button>
      <p class="job">Customer Service Reo</p>
    </section>
    <section>
      <button type="button" class="button2">Home Office</button>
      <p class="office">Penn Field</p>
    </section>
    <section>
      <button type="button" class="button3">Tell Me More</button>
      <p class="more">I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art. </p>
    </section>
    <script src="init.js"></script>
  </article>
</body>

</html>

答案 2 :(得分：0)

仅需一个jQuery()。您可以使用Array.prototype.keys()来获取对象的属性名称，方法是将className中的当前元素.toLowerCase()的{​​{1}}转换为.html()，其中{{1 }} .filter()当前元素大于.indexOf()，className和-1结果

.map()
.join()

答案 3 :(得分：0)

您只需在JS中使用一种document.ready方法。

您可以通过在所有按钮上添加click事件监听器来实现此目的。然后，当单击按钮时，您可以引用使用$(this)单击的按钮。要添加文本的元素是单击的按钮旁边的段落。您可以使用$(this).next('p')获取段落元素。然后，使用段落的类名可以确定要显示的对象属性。

下面，我使用了一个名为classToProp的对象，该对象将您的类名映射到从About对象检索到的字符串。使用此工具，您可以在相邻的p标签上显示所需的特定信息。

请参见下面的工作示例：

function About(firstName, lastName, jobTitle, homeOffice, tellMeMore) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.jobTitle = jobTitle;
  this.homeOffice = homeOffice;
  this.tellMeMore = tellMeMore;
};

var about01 = new About("Megan", "Adams", "Customer Serice Rep", "Penn Field", "I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art.");

var classToProp = {
  name: about01.firstName + " " + about01.lastName,
  job: about01.jobTitle,
  office: about01.homeOffice,
  more: about01.tellMeMore
}

$(document).ready(function() {
  $("button").click(function() {
    var nextP = $(this).next('p');
    var className = nextP.attr("class");
    var txt = nextP.text(); // get the text from the paragraph
    nextP.text(txt ? "" : classToProp[className]); // if the text is empty, display the associated property from your object, otherwise, if it already has text make it empty - this allows for a toggle effect
  });
})
<!DOCTYPE html>
<html>

<head>
  <title role="title">CEP Engineering Application</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<body>
  <article>
    <header role=banner>
      <h1>About Me</h1>
    </header>
    <img src="img/IMG_1989.jpg" alt="" style="width:250px;height:460px; " class="img">
    <section>
      <button type="button" class="button">Name</button>
      <p class="name"></p>
    </section>
    <section>
      <button type="button" class="button1">Job Title</button>
      <p class="job"></p>
    </section>
    <section>
      <button type="button" class="button2">Home Office</button>
      <p class="office"></p>
    </section>
    <section>
      <button type="button" class="button3">Tell Me More</button>
      <p class="more"></p>
    </section>
    <script src="init.js"></script>
  </article>
</body>

</html>

相关问题
最新问题