" getElementByID()。innerHTML + .src"用ONE SINGLE方法声明两种不同的方法

时间:2015-09-23 13:13:11

标签: javascript json innerhtml getelementbyid src

我有json数据的图像和文字。

public class MainActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {

int mutedColor = R.attr.colorPrimary;
SwipeRefreshLayout mSwipeRefreshLayout;
AppBarLayout appBarLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolBar = (Toolbar) findViewById(R.id.anim_toolbar);
    setSupportActionBar(toolBar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbarLayout.setTitle("Sudarshan Sunder");
    RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.scrollableview);
    recyclerView.setLayoutManager(layoutManager);
    RecyclerViewAdapter recyclerViewAdapter = new RecyclerViewAdapter(getApplicationContext());
    recyclerView.setAdapter(recyclerViewAdapter);
    Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.header);
    bmp = CircularImageBitmap.getCroppedBitmap(bmp, 200);
    FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.fab);
    floatingActionButton.setImageBitmap(bmp);
    mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.contentView);
    appBarLayout = (AppBarLayout) findViewById(R.id.bar);
    mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {

            mSwipeRefreshLayout.setRefreshing(false);
        }
    });

}

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
    if (i == 0) {
        mSwipeRefreshLayout.setEnabled(true);
    } else {
        mSwipeRefreshLayout.setEnabled(false);
    }
}

@Override
protected void onResume() {
    super.onResume();
    appBarLayout.addOnOffsetChangedListener(this);
}

@Override
protected void onPause() {
    super.onPause();
    appBarLayout.removeOnOffsetChangedListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

}

我使用这种方法将一些json数据分解为图像,一些分解为弹出窗口中的文本。

以图像形式查看:

"imageCollection": {
"Name": "Anna",
"imageUrl":"https://xxx/xxx/img.jpg?t=5657565",
},

以纯文本形式查看

document.getElementById("img").src=                    
jsonData.imageCollection.logo; 

我应该如何将这两种方法合并为一个输出?有什么建议吗?我的popup.html

document.getElementById("host").innerHTML= 
jsonData.imageCollection.Name

2 个答案:

答案 0 :(得分:0)

你在找这样的东西吗?

<div id="host">
 <image id="img"></image>
 <div id="nme"></name>
</div>

document.getElementById("img").src = jsonData.imageCollection.logo; 

document.getElementById("nme").innerHTML= jsonData.imageCollection.Name

答案 1 :(得分:0)

要显示标题为标题的图像,您需要执行以下操作:

<div class="popup">
    <img id="img" />
    <span id="host"></span>
</div>

为了清楚起见,这里的JS包含了存储在变量中的元素:

var image = document.getElementById('img');
var host = document.getElementById('host');

image.src = jsonData.imageCollection.logo;
host.innerHTML = jsonData.imageCollection.Name;

在原始HTML中,您设置的是图片来源(好),然后通过设置host.innerHTML来替换整个<img>。为了解决这个问题,我将img标记包装起来并创建了一个新的span标记,该标记将图像名称保存在另一个div中,以便它们可以一起设置样式。