Question

我在网页上使用小部件，但学习编码

这是我插入页面的代码：

<script type="text/javascript"     src="https://api.bistri.com/bistri.conference.widget.js"></script>
<div class="bistri-conference"
    data-appid="hidenfromquestion"
    data-appkey="hiddenfromquestion"
    data-room="meetingroom1"
    data-capacity="10"
    data-media-controls="true"
    data-audio-codec="ISAC/16000"
    data-audio-birate="40"
    data-video-birate="400"
    data-device="320x240:12"
    data-chat="True">
</div>

其中一个变量“数据室”我希望通过用户输入来改变数值。我需要什么脚本/代码才能询问用户输入，然后替换默认值“meetingroom1”

由于

Answer 1

我们假设你有一个输入

<input id="myInput" type="text"/>

添加JS，如下所示

$("#myInput").blur(function(){

    $(".bistri-conference").data("room", $(this).val());
});

Answer 2

在这种情况下使用普通JavaScript的一种方法如下：首先显示HTML：

<!-- wrapping the <inputs> used to update the data in a <form> -->
<form action="#" method="post">
    <!-- using <label> elements to allow clicking the text to
         focus the relevant <input> -->
    <label>Change the meeting room venue:
        <!-- using a custom data-* attribute to
             clearly denote the data to be
             updated by the <input> element's value -->
        <input data-attribute="room" type="text" />
    </label>
    <label>Change the venue capacity:
        <input data-attribute="capacity" type="text" />
    </label>
    <!-- a <button> to trigger the updates: -->
    <button type="button" id="update">Update</button>
</form>
<!-- your own posted element, unchanged -->
<div class="bistri-conference" data-appid="hidenfromquestion" data-appkey="hiddenfromquestion" data-room="meetingroom1" data-capacity="10" data-media-controls="true" data-audio-codec="ISAC/16000" data-audio-birate="40" data-video-birate="400" data-device="320x240:12" data-chat="True"></div>

JavaScript：

function updateData() {
    var inputArray = Array.prototype.slice.call(this.form.querySelectorAll('input'), 0),
        toUpdate = document.querySelector('.bistri-conference');

    inputArray.forEach(function (input) {
        if (input.value !== input.defaultValue) {
            toUpdate.dataset[input.dataset.attribute] = input.value;
        }
    });
}

document.getElementById('update').addEventListener('click', updateData);

＆＃13;

// a named function:
function updateData() {

  // Using Function.prototype.call() to use
  // Array.prototype.slice() to convert the NodeList
  // returned by 'querySelectorAll()' to be converted
  // into an Array:
  var inputArray = Array.prototype.slice.call(this.form.querySelectorAll('input'), 0),

    // retrieving the element to be updated by this function:
    toUpdate = document.querySelector('.bistri-conference');

  // iterating over the array of <input> elements, using
  // Array.prototype.forEach():
  inputArray.forEach(function(input) {
    // the 'input' is the current array-element 
    // from the array over which we're iterating.

    // if the value of the <input> is not the
    // default-value of the <input>:
    if (input.value !== input.defaultValue) {

      // we update the data-* attribute of the
      // element equivalent to the value held in
      // the <input> element's 'data-attribute',
      // setting it to the value entered in the <input>:
      toUpdate.dataset[input.dataset.attribute] = input.value;
    }
  });
}

// binding the 'click' event-handler function (note the lack of
// of parentheses after the function's name) of the button:
document.getElementById('update').addEventListener('click', updateData);

＆＃13;

label {
  display: block;
}
div[data-room]::before {
  content: 'current value: ' attr(data-room);
  display: block;
}
div[data-room]::after {
  content: 'current value: ' attr(data-capacity);
  display: block;
}

＆＃13;

<form action="#" method="post">
  <label>Change the meeting room venue:
    <input data-attribute="room" type="text" />
  </label>
  <label>Change the venue capacity:
    <input data-attribute="capacity" type="text" />
  </label>
  <button type="button" id="update">Update</button>
</form>
<div class="bistri-conference" data-appid="hidenfromquestion" data-appkey="hiddenfromquestion" data-room="meetingroom1" data-capacity="10" data-media-controls="true" data-audio-codec="ISAC/16000" data-audio-birate="40" data-video-birate="400" data-device="320x240:12"
data-chat="True"></div>

＆＃13;

JS Fiddle demo

参考文献：

Answer 3

if you are looking something like this ... then try this ;)

 <head>

        <script type="text/javascript"     src="https://api.bistri.com/bistri.conference.widget.js"></script>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
                function Onblur(event) {
                     var element=document.getElementById("something").value; 
                     $(".bistri-conference").attr("data-room", element);   
                }

            </script>
     </head>

    <body>
          <div class="bistri-conference"
            data-appid="hidenfromquestion"
            data-appkey="hiddenfromquestion"
            data-room="meetingroom1"
            data-capacity="10"
            data-media-controls="true"
            data-audio-codec="ISAC/16000"
            data-audio-birate="40"
            data-video-birate="400"
            data-device="320x240:12"
            data-chat="True">  
         <input type="text" id="something" onblur="javascript:Onblur(event)" value="Text field" />
         </div>
    </body>

用户输入以更改脚本中的变量

3 个答案: